zoukankan      html  css  js  c++  java

  • 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>






    附件列表
    • 相关阅读:
      Object的原型拷贝－create、assign、getPrototypeOf 方法的结合
      配intelliJ IDEA 过程
      浅谈HTTP中Get与Post的区别
      apply、call、bind区别、用法
      引用类型与原始类型的区别
      html5标签集结1
      指针作为参数传递
      指针与指针变量
      函数模板
      内置函数
    • 原文地址：https://www.cnblogs.com/vvch/p/4871641.html
    Copyright © 2011-2022 走看看