css3动画

最新推荐文章于 2024-04-16 00:12:34 发布

anv4932

最新推荐文章于 2024-04-16 00:12:34 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/qyuan/p/9455992.html

版权

什么是css3动画？

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

浏览器兼容：

1）Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

2）Chrome 和 Safari 需要前缀 -webkit-。

3）Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

创建动画：

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

1）关键词“from”“to”

　　 /*定义一个动画集*/
/*@keyframes 动画集名字*/

　　 @keyframes rotate{

　　　　from{

　　　　　　transform:rotate(0deg);

　　　　}

　　　　to{

　　　　　　transform:rotate(360deg);

　　　　}

　　}
       @-webkit-keyframes rotate{/*Safari和Chrome*/
            from{
               transform:rotate(0deg);
           }
            to{
               transform:rotate(360deg);
           }
       }

2）百分比

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}
动画属性：
animation：所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
　　　　　　　　　　　　　取值：linear 动画从头到尾的速度是相同的。
　　　　　　　　　　　　　　　　ease 默认。动画以低速开始，然后加快，在结束前变慢。
　　　　　　　　　　　　　　　　ease-in 动画以低速开始。
　　　　　　　　　　　　　　　　ease-out 动画以低速结束。
　　　　　　　　　　　　　　　　ease-in-out 动画以低速开始和结束。
　　　　　　　　　　　　　　　　cubic-bezier(n,n,n,n) 在 cubic-bezier 速度曲线函数中自己的值。可能的值是从 0 到 1 的数值。
　　　　　　　　　　　　　　　　steps(n)逐步运动
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。（infinite无限次播放）
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。
　　　　　　　　　　animation-direction 属性定义是否应该轮流反向播放动画。
　　　　　　　　　　　 如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。
　　　　　　　　　　　 注释：如果把动画设置为只播放一次，则该属性没有效果。

animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。（paused暂停）
animation-fill-mode 规定对象动画时间之外的状态（规定动画在播放之前或之后，其动画效果是否可见。）。
　　　　　　　　　　取值：forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
　　　　　　　　　　　　　backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
　　　　　　　　　　　　　both 向前和向后填充模式都被应用。
demo:
　　　　<style>
        .box{
            width:0;
            height:0;
            /*四个边框*/
            border-left:100px dashed red;
            border-top:100px dashed green;
            border-right:100px dashed blue;
            border-bottom:100px dashed orange;
            border-radius: 50%;
            /*使用动画集的名字*/
            animation-name: rotate;
            animation-duration: 2s;/*秒数*/
            animation-iteration-count: 10;/*设置动画执行的次数*/
            animation-timing-function: linear;/*匀速。设置速度的*/
            animation-direction: alternate;/*动画逆播*/
            animation-delay: 1s;/*延时*/
            animation-fill-mode:forwards; /*动画结束了，保持最后一个属性值，但是不能是无限次播放*/
　　　　　　　　　　 /*animation:rotate 2s 10 linear alternate 1s forwards;简写属性*/
        }
        .box:hover{
            animation-play-state: paused;/*鼠标进入就停止了*/
        }
        /*定义一个动画集*/
        /*@keyframes 动画集名字*/
　　　　　　　@keyframes rotate{
            0%{
                transform:rotate(0deg);
            }
            100%{
                transform:rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
注意：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了

转载于:https://www.cnblogs.com/qyuan/p/9455992.html

anv4932

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画

什么是css3动画？动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。浏览器兼容：1）Internet Expl...
复制链接

扫一扫