CSS3 常用属性(四)-- 过渡、动画

      过渡--transition

      过渡这个属性的作用是当元素的样式发生变化时,使用动画的效果进行变化。有了过渡属性后,很多情况下,写一些简单效果,将不需要再借助 javascript 去计算。

      transition  过渡属性简写,可以设置四个值

      transition-property 过渡的CSS的名字,或是all

      transition-duration  从一个状态到另一个状态的的时间

      transition-timing-function 过渡效果的动画曲线,默认easy,linear是匀速,cubic-bezier(n,n,n,n)可以自定义动画曲线

      transition-delay  延时

  下面是利用CSS3过渡制作的一个旋转方块,鼠标移入方块后等待1s,然后10s 内匀速旋转 3600deg。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div class="box"></div>
 9     <style>
10     .box{
11         width: 200px;
12         height: 200px;
13         background: red;
14         margin: 0 auto;
15         transition:all 10s linear 1s;
16     }
17     .box:hover{
18         transform: rotate(3600deg);
19     }
20     </style>
21 </body>
22 </html>

  

  动画--animation

      过渡是当元素状态发生改变时,触发了过渡的动画效果,而动画属性,则是当页面打开时,就开始执行了,一直到执行结束或页面关闭。

      执行动画时,是需要先定义动画规则,有了规则,元素才可以按照预设规则执行动画效果。定义动画规则时,是使用 @keyframes 来设置。

      用法如下:

@keyframes animation_name{
    0%{
      width:200px;
    }
    100%{
      width:400px;
    }
}

  以上代码的规则是表示,规则名字是animation_name,规则是某个元素的宽度从 200px 到400px 。

  animation属性可以添加的值有以下几条:

  animation:动画属性的简写

  animation-name:动画规则的名称

  animation-duration:动画执行一个周期的时间

  animation-timing-function:动画的运动曲线

  animation-delay:延时

  animation-iteration-count:动画执行次数,默认是1,infinite是无穷次

  animation-direction:默认是normal,alternate表示可逆向播放

  animation-play-state:动画运行或暂停,running/paused

  下面是一个小例子,运行在浏览器中是,一个小方块,在打开页面后就开始匀速可逆性的转动,而且一直在转动不会停止,点击停止,再次点击,继续转动。

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div class="box"></div>
 9     <style>
10     .box{
11         width: 200px;
12         height: 200px;
13         background: red;
14         margin: 0 auto;
15         animation:zhuan .5s linear infinite alternate;
16     }
17     @keyframes zhuan{
18         0%{
19             transform:rotate(0deg);
20         }
21         100%{
22             transform:rotate(180deg);
23         }
24     }
25     </style>
26 </body>
27 </html>
28 <script>
29     var box = document.getElementsByClassName('box')[0];
30     var flag = true;
31     box.onclick = function () {
32         if (flag) {
33             box.style.animationPlayState = 'paused';
34         }else{
35             box.style.animationPlayState = 'running';
36         }
37         flag = !flag;
38     }
39 </script>
posted @ 2017-04-14 11:53  蓝度飞  阅读(669)  评论(0编辑  收藏  举报