前端学习(二十八) 动画(css)
transition
transition-property:none|<single-transition-property>["," <single-transition-property>]*,表示哪些属性要执行动画过程
transition-duration:<time>[,<time>]*,动画的执行时间
transition-timing-function:<single-transition-timing-function>[","<sing-transition-time-function>]*,表示动画执行的速度
<single-transition-timing-function>=
ease(两头慢,中间快)|
linear(线性,匀速执行)|
ease-in(开始慢)|
ease-out(结束慢)|
ease-in-out(两头慢,中间块,与ease的区别为,ease的幅度小一点)|
transition-delay:<time>[,<time>]*动画延迟执行
合并:
transition:background 0.2s ease 0s,top 0.2s esae 0.1s(执行的属性名,执行持续时间,匀速还是变速执行,延迟时间,多个的话用,号隔开),需要触发条件,比如鼠标移动上去,点击等
animation
animation:<single-animation>[,<single-animation>]*
<single-animation>=<single-animation-name>||<time>||<single-animation-timing-function>||<time>||<single-animation-iteration-count>||<single-animation-direction>||<single-animation-fill-mode>||<single-animation-play-state>
动画名 || 持续时间 || 变速还是匀速 || 延迟时间 || 执行次数 || 方向 || 动画的第一帧和最后一帧状态 || 动画是否执行
animation-name:<single-animation-name>[","<single-animation-name>]*,自定义的动画名称
animation-duration:<time>[,<time>]*,动画持续时间
animation-timing-function:变速还是匀速
animation-iteration-count:<single-animation-iteration-count>[,<single-animation-iteration-count>]*,表示执行次数infinite|<number>(无限|次数)
animation-direction:<single-animation-direction>[","<single-animation-direction>]*
<single-animation-direction>:
normal,正常
reverse,反向,比如我定义的是从左往右滚动,但是设置这个值后会从右往左滚动
alternate,往返
alternate-reverse,反向往返
animation-play-state:<single-animation-play-state>[,<animation-play-state>]*
<single-animation-play-state>=running(动画执行的)|pused(动画停止的)
animation-delaty:<time>[,<time>]*,延迟时间
animation-fill-mode:<single-animation-fill-mode>[,<single-animation-fill-mode>]
<single-animation-fill-mode>:none(不做设置)|backwards(动画的初始状态为动画的第一帧)|forwards(动画的结束状态为动画的最后一帧)|both
动画定义@keyframes
@keyframes abc{
from{}
to{}
}
==
@keyframes abc{
0%,25%,50%{}
75%,100%{}
}