CSS3动画功能
CSS3动画功能
就只是小茗
发布于 2018-03-07 14:32:59
发布于 2018-03-07 14:32:59
1.transition功能
transition属性的使用方法：transition:property duration timing-function;
其中property表示对哪个属性进行平滑过渡，duration表示多长时间完成属性值的平滑过渡，timing-function表示通过什么方法来进行平滑过渡。
多平滑过渡示例：
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>测试</title>
8 </head>
9 <body>
10 <div id="test"></div>
11 <style>
12 #test{
13 width: 500px;
14 height: 500px;
15 background-color: yellow;
16 /*css动画*/
17 transform: rotate(0);
18 -webkit-transition: transform 0.5s linear, width 0.5s linear;
19 -moz-transition: transform 0.5s linear, width 0.5s linear;
20 -ms-transition: transform 0.5s linear, width 0.5s linear;
21 -o-transition: transform 0.5s linear, width 0.5s linear;
22 transition: transform 0.5s linear, width 0.5s linear;
23 }
24 #test:hover{
25 width: 200px;
26 transform: rotate(180deg);
27 }
28 </style>
29 </body>
30 </html>2.animation功能
使用示例：
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
5 <meta http-equiv="x-ua-compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <title>测试</title>
8 </head>
9 <body>
10 <div id="test"></div>
11 <style>
12 /*animation动画*/
13 @-webkit-keyframes colorChange {
14 0%{
15 background-color: deepskyblue;
16 }
17 50%{
18 background-color: red;
19 }
20 100%{
21 background-color: deepskyblue;
22 }
23 }
24 #test{
25 width:500px;
26 height: 500px;
27 background-color: deepskyblue;
28 }
29 #test:hover{
30 animation-name: colorChange;
31 animation-duration: 1s;
32 animation-timing-function: linear;
33 }
34 </style>
35 </body>
36 </html>实现动画的方法：
方法 | 属性值的变化速度 |
|---|---|
linear | 在动画开始时与结束时以同样的速度进行变化 |
ease-in | 动画开始时速度很慢，然后速度沿曲线值进行加快 |
ease-out | 动画开始时速度很快，然后速度沿曲线值进行放慢 |
ease | 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢 |
ease-in-out | 动画开始时速度很慢，然后速度沿曲线值进行加快，然后再沿曲线值进行放慢 |
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-06-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录