CSS3 ：animation 动画

最新推荐文章于 2024-01-05 14:27:26 发布

weixin_30824277

最新推荐文章于 2024-01-05 14:27:26 发布

阅读量66

点赞数

原文链接：http://www.cnblogs.com/wm218/p/9244685.html

版权

CSS3动画分为二部份：

1、定义动画行为：

使用@keyframes定义动画行为，有两种方式：

方式一：仅定义动画起始样式，与动画结束样式

 1 @keyframes (动画行为名称)
 2 {
 3 from {background: red;}
 4 to {background: yellow;}
 5 }
 6 
 7 @-moz-keyframes (动画行为名称)
 8 {
 9 from {background: red;}
10 to {background: yellow;}
11 }
12 
13 @-webkit-keyframes (动画行为名称)
14 {
15 from {background: red;}
16 to {background: yellow;}
17 }
18 
19 @-o-keyframes (动画行为名称)
20 {
21 from {background: red;}
22 to {background: yellow;}
23 }

方式二：定义动画进展中的每步样式，百分比表示动画执行的进度百分值

 1 @keyframes (动画行为名称)
 2 {
 3 0%   {background: red;}
 4 25%  {background: yellow;}
 5 50%  {background: blue;}
 6 100% {background: green;}
 7 }
 8 
 9 @-moz-keyframes (动画行为名称)
10 {
11 0%   {background: red;}
12 25%  {background: yellow;}
13 50%  {background: blue;}
14 100% {background: green;}
15 }
16 
17 @-webkit-keyframes (动画行为名称)
18 {
19 0%   {background: red;}
20 25%  {background: yellow;}
21 50%  {background: blue;}
22 100% {background: green;}
23 }
24 
25 @-o-keyframes (动画行为名称)
26 {
27 0%   {background: red;}
28 25%  {background: yellow;}
29 50%  {background: blue;}
30 100% {background: green;}
31 }

2、定义动画执行方式。

将动画的行为附加到元素上，使其按照此规则执行动画效果，但我们还要给动画设定执行方式，比如什么动画让它多长时间完成，是否循环执行动画等。

动画执行方式语法：

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

语法中译：

1 animation:
2     动画行为名称，在keyframes内定义的名称
3     动画周期，比如 5s 表示5秒完成此动画一次
4     动画的速度曲线， linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)
5     动画何时开始，默认值0，立刻播放
6     动画被播放的次数，默认值1，值infinite 表示一直循环播放
7     动画是否在下一周期逆向地播放，可选值：  normal（默认，不逆向地播放）  | alternate（动画应该轮流反向播放）

3、可以通过增加CSS样式：animation-play-state 来控制CSS3动画暂停与播放

1 animation-play-state: paused | running;
2 -webkit-animation-play-state: paused | running ;

代码演示:

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6     a{width:100px;height:30px;display:block;}
 7     
 8     @keyframes myan{
 9         0%    {background:#066;left:20px;top:20px;}
10         50% {background:#090;left:100px;top:100px;}
11         100% {background:#093;left:300px; top:300px;}
12     }
13     
14     
15     #a{
16         position:absolute;
17         animation: myan 5s linear 2s infinite  alternate;
18     }
19       
20     #a:hover{
21           /* 这里使动画停止了 */
22         animation-play-state:paused;
23       }
24 </style>
25 </head>
26 
27 <body>
28 <div style="position:relative;margin:50px;width:100px;height:100px;background:#ccc;">
29 
30     <a href="#" id="a">1111111</a>
31     </div>
32    
33 </body>
34 </html>

转载于:https://www.cnblogs.com/wm218/p/9244685.html

weixin_30824277

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 ：animation 动画

CSS3动画分为二部份：1、定义动画行为：使用@keyframes定义动画行为，有两种方式：方式一：仅定义动画起始样式，与动画结束样式 1 @keyframes (动画行为名称) 2 { 3 from {background: red;} 4 to {background: yellow;} 5 } 6 7 @-moz-keyframes (动画行为名...
复制链接

扫一扫