CSS3特效之动画

我们在工作中会遇到很多特效，很多情况下因为我们不是专业的美工所以就很难想到一些动画是怎样设计的，在这里小编给大家介绍一个网站https://daneden.github.io/animate.css/

你在这里会看到很多的特效，

点如进入github中，你就能看到下图

然后打开里面就有动画的代码

 @-webkit-keyframes bounce {
         from, 20%, 53%, 80%, to {
            -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            -webkit-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
         }

         40%, 43% {
            -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0);
         }

         70% {
            -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
            -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0);
         }

         90% {
            -webkit-transform: translate3d(0,-4px,0);
            transform: translate3d(0,-4px,0);
         }
      }

然后在你的元素中使用animation：bounce 2s linear infinite,调用就可以了！

原文地址：https://blog.csdn.net/u013035477/article/details/52838905?ops_request_misc=&request_id=&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-2-52838905-null-null.142^v87^koosearch_v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88