当前位置: 首页 > Web前端 > CSS

动画风格分析

时间:2023-03-31 01:12:18 CSS

Animationanalysis1.Transition:(一个动画需要有开始,过程,结束时间。一般我们只需要描述开始和结束,电脑会自动补上过程)1.transition-duration,过渡时间。过渡时间写在不同的属性上会有不同的效果。startswith,endswith(在原始元素上),startswithout,endswith(写在伪类属性上),startswithout,endswith(超时写在原始元素上,伪类中的过渡时间为0秒)。2.transition-delay,过度延迟。正数表示效果延迟多少秒,负数表示元素提前多少变化。3.transition-property,规定transition元素作用于那个元素。可用值:none所有的transitioneffects都没有用,all表示所有的transitionvalues都有效果4、transition-timing-function,贝塞尔曲线如下图(懂)!,Activeanimation1.animation-name(定义动画名称)2.animation-duration(运动时长)3.animation-timing-function(运动速率)4.animation-iteration-count:infinite(运动模式)5.animation-fill-mode(动画结束时的状态)可选值:1.backwards默认返回初始位置2.forwards动画结束后保持最终状态6.animation-direction:可以放置不连贯将元素置于运动中的情况选择值:1.normal(0~100):立即切换回,每次向前播放。2.反转(100~0);从100%位置到0%位置。3.交替(0~100~0);从0%开始往复播放,大于等于2就可以看到效果了。效果。