We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
原文链接:千古壹号:css3动画详解 18种loading效果:18种loading效果
过渡 transition
transition
转换
transform
动画 animation
animation
transition 中文含义是过渡,主要用来实现元素不同状态间的平滑过渡。俗称 补间动画。
transition 是 transition-property, transition-duration, transition-timing-function, transition-delay 的缩写
transition-property, transition-duration, transition-timing-function, transition-delay
语法如下:
/** transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; */ transition: property name | duration | timing function | delay;
transition-property: all; 如果希望所有的属性都发生过渡,就使用all。
transition-property: all;
transition-duration: 1s; 过渡的持续时间。
transition-duration: 1s;
transition-timing-function: linear; 运动曲线。属性值可以是:
transition-timing-function: linear;
linear
ease
ease-in
ease-out
ease-in-out
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
transition-delay: 1s;
转换操作主要是对元素进行 位移、旋转、变形、缩放 操作,配合transition,可以实现动画转换效果
在 CSS3 当中,通过 transform 转换来实现 2D 转换或者 3D 转换
2D转换包括:缩放、移动、旋转
scale
transform: scale(x轴缩放倍数, y轴缩放倍数); transform: scale(2, 0.5);
translate
transform: translate(水平位移, 垂直位移); transform: translate(-50%, -50%);
roate
transition-origin
transform: rotate(角度); transform: rotate(45deg);
transform-origin
transform-origin: x-axis y-axis z-axis;
transform通常用来实现过度的简单动画 animation来实现复杂的动画
1、定义动画的步骤
可以看出来,定义动画,类似于定义函数,先定义,后使用,语法如下:
定义动画: @keyframes 动画名{ from{ 初始状态 } to{ 结束状态 } } 调用: animation: 动画名称 持续时间;
animation属性的格式如下: 详见MDN animation
animation: 定义的动画名称 持续时间 执行次数 是否反向 运动曲线 延迟执行。(infinite 表示无限次) animation: move1 1s alternate linear 3; animation: move2 4s;
The text was updated successfully, but these errors were encountered:
No branches or pull requests
原文链接:千古壹号:css3动画详解
18种loading效果:18种loading效果
css3动画分类
过渡
transition
转换
transform
transform
动画
animation
过渡:
transition
transition
中文含义是过渡,主要用来实现元素不同状态间的平滑过渡。俗称 补间动画。transition
是transition-property, transition-duration, transition-timing-function, transition-delay
的缩写语法如下:
/** transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间; */ transition: property name | duration | timing function | delay;
transition-property: all;
如果希望所有的属性都发生过渡,就使用all。transition-duration: 1s;
过渡的持续时间。transition-timing-function: linear;
运动曲线。属性值可以是:linear
线性ease
减速ease-in
加速ease-out
减速ease-in-out
先加速后减速transition-delay: 1s;
过渡延迟。多长时间后再执行这个过渡动画。demo
2D 转换
转换操作主要是对元素进行 位移、旋转、变形、缩放 操作,配合transition,可以实现动画转换效果
在 CSS3 当中,通过
transform
转换来实现 2D 转换或者 3D 转换2D转换包括:缩放、移动、旋转
scale
translate
roate
, (roate
结合transition-origin
可以改变旋转中心点)transform-origin
3D转换(暂时忽略,用的很少)
动画
transform通常用来实现过度的简单动画
animation来实现复杂的动画
1、定义动画的步骤
可以看出来,定义动画,类似于定义函数,先定义,后使用,语法如下:
animation属性的格式如下: 详见MDN animation
The text was updated successfully, but these errors were encountered: