CSS3动画功能

1、transition功能

transition属性的使用方法：transition：property duration timing-function

其中property表示对哪个属性进行平滑过渡，duration表示多长时间完成属性值的平滑过渡，timing-function表示通过什么方法来

进行平滑过渡

多平滑过渡示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
          <meta http-equiv="content-type" content="text/html;charset=utf-8">
           <meta http-equiv="x-ua-compatible" content="IE=edge">
           <meta name="viewport" content="width="device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
             <title>测试</title>
</head>
<body>
<div id="test"></div>
<style>
          #test{
                    width:500px;
                    height:500px;
                    background-color:yellow;
                    /*css动画*/
                         transform:rotate(0);
                          -webkit-transition:transform 0.5s linear,width 0.5s linear;
                          -moz-transition:transform  0.5s linear,width 0.5s linear;
                          -ms-transition:transform 0.5s linear,width 0.5s linear;
                         -o-transition:transform 0.5s linear,width 0.5s linear;
                          transition:transform 0.5s linear,width 0.5s linear;
}
#test:hover{
                  width:200px;
                   tranform:rotate(180deg);
}
</style>
</body>
</html>

2.animation功能

使用示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
            <meta http-equiv=“content-type” content="text/html;charset="utf-8">
             <meta http-equiv="x-ua-compatible" content="IE=edge">
             <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
              <title>测试</title>
</head>
<body>
 <div id="test"></div>
<style>
/*animation动画*/
 @-webkit-keyframes colorChange{
      0%{
             background-color:deepskyblue;
            }
       50%{
                 background-color:red;
               }
        100%{
                   background-color:deepskyblue;
                 }
}
#test{
              width:500px;
              height:500px;
               background-color:deepskyblue;
           }
 #test:hover{
               animation-name:colorChange;
                animation-duration:1s;
               animation-timing-function:linear;
}
 </style>
</body>
</html>

实现动画的方法：

 

posted @ 2017-07-24 16:33  维尼熊320  阅读(121)  评论(0)  编辑  收藏  举报