过渡动画
过渡动画当失去触发时机时,会恢复到原来的状态。
触发过渡动画的时机:
1.hover (最常用)
2.focus 当输入框或的焦点时.
3.checked(选框被选中时)
4.媒体查询
5.js
语法:
1.要进行变化的属性(transition-property)
2.动画的持续时间(transition-duration)
3.变化曲线transition-timing-function
4.延迟时间transition-delay
transition-property 过渡属性可以填多个值,值与值之间用逗号隔开。all表示所有的属性
变化曲线的值:
ease:默认值,先快再快再慢;
ease-in:淡入(动画刚开始的时候变化慢);
ease-out:淡出(动画快结束的时候变化慢);
ease-in-out:淡入淡出(开始慢,中间快,结束慢);
linear:线性(匀速);
贝塞尔曲线:cubic-bezier(X1,X2,Y1,Y2);
这四个值取值范围为0~1,所有的变化都可以用贝塞尔曲线代替。
ease 函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)
ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
合写： 多个值中间用空格,没有顺序限制,但是要注意如果写了两个秒数,
系统会把第一个当做动画执行时间,第二个当做延迟时间。
transition: all 5s linear 1s;
关键帧动画
在规定的动画时间内,一次动画可以做多种变化。
animation语法格式：
1.animation-name:动画的名字,配合keyframes使用,动画名字是我们自己起的.
2.animation-duration:动画的持续时间
3.animation-iteration-count:重复次数,默认一次.infinite无限次
4.animation-delay:动画延迟时间.
5.animation-direction:动画播放的方向
a.normal正向播放
b.reverse:反向播放
c.alternate 奇数次正向,偶数反向
d.alternate-reverse 偶数次正向,奇数次反向.
6.animation-play-state:动画的状态
a.paused
b.running 播放
7.animation-fill-mode:设置动画以外的状态,
a.none 不设置,完成后回到原始状态
b.forwards 保存最后一帧
c.backwards 动画结束后,快速回到原始状态.
d.both 具备forwards 和 backwards的特点.
动画效果由@keyframes决定
1.@keyframes要写在css样式里面
2.@keyframes 中的动画名要和animation-name的名字一样。
格式一:
@keyframes 动画名 {
from{ 修改的属性值 }
百分比{ 修改的属性值 }
to{ 修改的属性值 }
}