css3 动画

1、过渡
    所有的过渡必须明确指定改变数值，height，width等必须是精确地数值或百分比，不能为auto；
    只要能明确改变属性数值的事件都可以触发过渡，class，JavaScript，hover等；
  1. .height-animate {
  2.     -webkit-transition: -webkit-transform .3s ease-in-out, height .3s ease-in-out;
  3.     -moz-transition: -moz-transform .3s ease-in-out, height .3s ease-in-out;
  4.     -o-transition: -o-transform .3s ease-in-out, height .3s ease-in-out;
  5.     transition: transform .3s ease-in-out, height .3s ease-in-out
  6. }
  8. .all-animate {
  9.     transition: all .5s;
  10.     transition-property: all;
  11.     transition-duration: .5s;
  12.     transition-timing-function: initial;
  13.     transition-delay: initial;
  14. }
2、动画
  1.  @keyframes anm {
  2.             0% {
  3.                 width: 10px;
  4.                 height: 10px;
  5.             }
  6.             50% {
  7.                 width: 200px;
  8.             }
  9.             100% {
  10.                 width: 200px;
  11.                 height: 100px;
  12.             }
  13.         }
  15.         .demo {
  16.             display: inline-block;
  17.             background: green;
  18.         }
  20.         .demo:hover {
  21.             -webkit-animation-name: anm;
  22.             -moz-animation-name: anm;
  23.             -o-animation-name: anm;
  24.             animation-name: anm;
  25.             animation-timing-function: ease-in-out;
  26.             animation-duration: 2s;
  27.             animation-fill-mode: forwards; /*动画结束时停留在最后一帧*/
  28.         }
3、变形
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .demo img {
  8.             transition: all 0.3s ease-in-out;
  9.         }
  11.         .demo img:hover {
  12.             transform: translate(100px) scale(1.5);
  13.         }
  15.         @keyframes anm {
  16.             0% {
  17.                 transform: rotate(0deg)
  18.             }
  19.             50% {
  20.                 transform: rotate(90deg)
  21.             }
  22.             100% {
  23.                 transform: rotate(180deg)
  24.             }
  25.         }
  27.         .demo2 img:hover {
  28.             -webkit-animation-name: anm;
  29.             -moz-animation-name: anm;
  30.             -o-animation-name: anm;
  31.             animation-name: anm;
  32.             animation-timing-function: ease-in-out;
  33.             animation-duration: 2s;
  34.             animation-fill-mode: forwards; /*动画结束时停留在最后一帧*/
  35.         }
  36.     </style>
  37. </head>
  38. <body>
  39. <div class="demo"><img src="img/question_mark.png">aaaaaa</div>
  40. <br>
  42. <div class="demo2"><img src="img/question_mark.png">aaaaaa</div>
  43. </body>
  44. </html>






附件列表

     

    posted @ 2015-10-12 14:45  skyding  阅读(153)  评论(0)  编辑  收藏  举报