Fork me on GitHub

简述CSS3中的动画

动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
1.在CSS3中的设置动画步骤: a、通过@keyframes指定动画序列; b、通过百分比将动画序列分割成多个节点; c、在各节点中分别定义各属性 d、通过animation将动画应用于相应元素; 示例: [code] //定义规则 @keyframes move{//move为规则名称 from{ background-color:yellow; } to { background-color:red; } } //也可以以百分比的形式,设置多个节点 @keyframes move{ 0%{ background-color:yellow; } 50% { background-color:red; } 75% { background-color:green; } } //最后在animation属性里应用 .div { animation:move 1s; } [/code]
2.animation 中的属性简述 a、animation-name设置动画序列名称; b、animation-duration动画持续时间; c、animation-delay动画延时时间; d、animation-timing-function动画执行速度,linear(平均)、ease(慢快慢)、ease-in(慢快)、ease-out(快慢)、cubic-bezier(自定义速度); e、animation-play-state动画播放状态,running、paused; f、animation-direction动画逆播,normal(正常,动画结束回到第一帧),reverse(与normal相反),alternate(动画完成,在倒放逆播),alternate-reverse(与alternate相反); g、animation-fill-mode动画执行完毕后状态,forwards(保持最后一帧的状态)、backwards(回到第一帧); h、animation-iteration-count动画执行次数,可以是1、2、3…inifinate表示无数次; i、steps(60) 这里表示动画分成60步完成,一帧一帧的进行,这是第一个参数,第二个参数(可选)为start或end,默认情况下为end; 关于start和end 的区别:他们都规定了动画时间变化点,start是在两帧跳换前,end是在两帧跳换后; 比如:分两步,0%-100%,盒子颜色变化从红色变到绿色 如果设置start,他在0%跳换前,动画就执行了,所以我们刷新页面一进去就看到绿色,设置end的话,我们会一直看到红色,0%前动画不会执行,跳到100%后动画结束,这是绿色状态不可见的,还会变成红色。

总之,如果3s的动画执行时间,start和end的区别就是,到底是在3s前就执行,还是在3s后执行的区别。 参数值的顺序: 关于几个值,除了名字,动画时间,延时有严格顺序要求其它随意 最后2个小例子熟悉一下: CSS3设置帧动画达到钟表效果:

-------------本文结束感谢您的阅读-------------

本文标题:简述CSS3中的动画

文章作者:陈晓拉尼

发布时间:2017年09月17日 - 12:09

最后更新:2018年09月13日 - 23:09

原始链接:http://yoursite.com/archives/3291.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。