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>






    附件列表
    • 相关阅读:
      LeetCode Subsets II
      LeetCode Rotate Image
      LeetCode Palidrome Number
      LeetCode Generate Parentheses
      LeetCode Maximum Subarray
      LeetCode Set Matrix Zeroes
      LeetCode Remove Nth Node From End of List
      Linux Loop设备 使用
      Linux 文件系统大小调整
      LeetCode N-Queens II
    • 原文地址：https://www.cnblogs.com/vvch/p/4871641.html
    Copyright © 2011-2022 走看看