css3动画animate

 

CSS3 动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

@keyframes 定义动画关键帧:

@keyframes animateName {
            0%    {
                状态
            }
            100% {
                状态
            }
        }
@keyframes animateName {
              from    {
                状态
            }
              to {
                状态
            }
        }

 

动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数。

from和to等同于0%和100%；0%表示动画的开始；100%表示动画的结束；

@keyframes+动画的名字构建。chrome和Safari 要在之前加前缀-webkit-变成了@-webkit-keyframes；

当在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长（默认为0）

例如：

 

当然对于状态的定义不局限于开始和结束两个时间点，我们可以指定一个动画过程中任何时间点元素的状态。50%就是开始与结束的时间点，也可以写入10%，20%，30%...根据需求挑时间点动画。

CSS3 动画属性：

当我们使用@keyframes定义好了一个动画，它并不会执行产生任何效果，直到我们通过animation属性将动画应用到相应元素上。

对于 CSS3 animation 属性其完整的语法如下：

animation: name duration timing-function delay iteration-count direction;

• name是使用@keyframes定义好的关键帧名称
• duration从字面意思可知是指定动画持续时间
• timing-function 指定动画以何种方式播放，具体指的是从元素的一个状态过渡到另一个状态所使用的方式，可用的值有linear，ease, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)。
• delay指定动画何时开始，默认为0；
• iteration-count 指定动画重复次数，可以指定一个数字，也可以使用'infinite'表示一直播放。默认为1.
• direction指定动画是否反向播放或者交替着播放，可用的值有normal, reverse, alternate, alternate-reverse

另外还有一个属性非常有用，一般在js中控制其属性。animation-play-state：paused/running；具体参考：http://www.w3school.com.cn/tiy/c.asp?f=css_animation-play-state

其中name和duration 是必需的，如果不指定duration默认为0，也就是动画持续0秒，所以就无法看到动画效果。

以上的例子.tablist使用@keyframes定义好的动画。

 

参考：

　　http://www.cnblogs.com/Wayou/p/first_glance_at_the_css3_animation.html

　　http://www.w3school.com.cn/css3/css3_animation.asp

　　http://www.w3schools.com/css/css3_animations.asp

 

转载于:https://www.cnblogs.com/floatboy/p/css3_animate.html