css3动画记录篇

最新推荐文章于 2018-06-07 11:48:16 发布

置顶 Revival_Liang

最新推荐文章于 2018-06-07 11:48:16 发布

阅读量397

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/revival_liang/article/details/53946309

版权

web 专栏收录该内容

75 篇文章 0 订阅

订阅专栏

PC端动画过度变换的兼容情况，用前阅读如下：（移动端由于手机迭代快，所以移动开发可不必考虑）

（1）transform：Chrome、Safari、Opera、Firefox、IE9 分别需要前缀 -webkit-、-o-、-moz-，-ms-。

（2）transition：Chrome、Safari、Opera、Firefox分别需要前缀-webkit-、-o-、-moz-，IE9不支持此属性

（3）@keyframes 规则 animation 属性：Chrome、Safari、Opera、Firefox、IE9 分别需要前缀 -webkit-、-o-、-moz-，IE9对此均不支持

1，上下移动

[html]view plaincopy 
   
 <!doctype html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8" />  
     <title>Document</title>  
     <style>  
         .box{width: 100px;height: 100px;margin: 100px; background: yellow;}  
         /*以下是时间段的分布0%到%50就是说这之间占有一半（50%）的时间，即Y轴0px到Y轴-50px用时为2s的一半，效果为上下移动*/  
         @keyframes topBottomMove{  
         0%   {  
             transform: translateY(0px);   
             }  
         50%  {  
          transform: translateY(-50px);  
          }  
         100% {  
         transform: translateY(0px);   
         }  
     }  
     .box {  
         animation: topBottomMove 2s infinite ease-in-out;  
     }  
     </style>  
 </head>  
 <body>  
     <div class="box"></div>  
 </body>  
 </html>  

2、360°无限循环

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
 <meta charset="utf-8" />  
 <title></title>  
 </head>  
 <body>  
 <style type="text/css">  
 *  
 {  
 margin:0;  
 padding:0;  
 text-align:center;   
 }  
   
 @keyframes myRotate{  
 from{  
 transform:rotate(0deg);  
 }  
 to{  
 transform:rotate(360deg);  
 }  
 }   
 #box  
 {  
 width:300px;  
 height:300px;  
 margin: 300px auto;  
 border-radius: 50%;  
 /*linear为直线的，infinite则表示无限的*/  
 animation:myRotate .8s linear infinite;  
 color: white;  
 background:black;  
 }  
 </style>  
 <div id="box">  
 ABC  
 </div>  
 </body>  
 </html>  

3，放大缩小

[html]view plaincopy 
   
 <!DOCTYPE html>  
 <html>  
 <head>  
 <meta charset="utf-8" />  
 <title></title>  
 </head>  
 <body>  
 <style type="text/css">  
 *  
 {  
 margin:0;  
 padding:0;  
 text-align:center;   
 }  
   
 @keyframes mymove{  
        0%   { transform: scale(1) }  
        25%  { transform: scale(.8) }  
        50%  { transform: scale(1.1) }  
        75%  { transform: scale(.9) }  
        100% { transform: scale(1) }  
     }  
     /*如果在vue上使用，需要实现触发一次就执行一次的话，则可以用:class='{move:move}'，.move{animation: mymove .5s  infinite;},通过修改move的boolean值达到效果*/  
 #box  
 {  
 width:300px;  
 height:300px;  
 line-height: 300px;  
 margin: 300px auto;  
 border-radius: 50%;  
 font-size: 200px;  
 border: 5px solid red;  
 /*infinite则表示无限,ease-in-out则是执行一次*/  
 animation: mymove .5s  infinite;  
 color: white;  
 background:black;  
 }  
 </style>  
 <div id="box">  
 A  
 </div>  
 </body>  
 </html>  

Revival_Liang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3动画记录篇

$(document).ready(function(){ //mouseover获得鼠标焦点被触发 $("#div1").mouseover(function(){ //使显示，1代表速度 $("#div2").fadeIn(1); }); //mouseover失去鼠标焦点被触发 $("#div1").mouseout(function(){ //使隐藏，1代表速度
复制链接

扫一扫