p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66; min-height: 22.0px }
span.Apple-tab-span { white-space: pre }
动画分为:
1.css3动画:(动画性能远高于js)
1).过渡动画(transition)
2).关键帧动画(@keyframes,animation)
2.js动画:
过渡动画(transition)
语法: (所有时长单位都是秒）
1.变化属性(transition-property(属性名))
2.持续时长(transition-duration(持续时长))*该属性必须有(默认时间为"0")
3.变化曲线(transition-timing-function)
4.延迟时长(transition-delay)
*当失去触发时机的时候,还会动画返回原来的状态
transition-timing-function：变化速率
1.ease(默认值):先快再快再慢
2.ease-in:淡入(动画刚开始的时候变化慢)
3,ease-out:淡出(动画快结束的时候变化慢)
4.ease-in-out:淡入淡出
5.linear:匀速变化
6.cubic-bezier:贝塞尔曲线,所有的变化都可以用贝塞
尔曲线来代替
cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的范围都是0~1
贝塞尔曲线图：（下面的例子会提到，具体不做详解）
过渡动画没有自己的触发时机,只有以下几种,可以触发过渡动画:
1.:hover(最常用)
2.:focus
3.:checked(多选输入框被勾选的状态)
4.媒体查询(@media screen and(条件){样式})
5.js
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>过渡动画</title>
6 <style type="text/css">
7 .div1{
8 width: 200px;
9 height: 200px;
10 background: green;
11 /*变化属性:
12 默认值为all指代所有的属性(不写,默认该元素身上所有属性的值的更改,
13 都支持动画效果)
14 */
15 transition-property:all;
16 /*多组值之间用","隔开*/
17 transition-property: width,background;
18 /*持续时长,默认值为"0",就是没有动画(设置过渡动画一定不能省略)*/
19 transition-duration: 2s;
20 /*变化速率
21 四个值:1.ease(默认值):先快再快再慢
22 2.ease-in:淡入(动画刚开始的时候变化慢)
23 3,ease-out:淡出(动画快结束的时候变化慢)
24 4.ease-in-out:淡入淡出
25 5.linear:匀速变化
26 6.cubic-bezier:贝塞尔曲线,所有的变化都可以用贝塞
27 尔曲线来代替
28 cubic-bezier(x1,y1,x2,y2),x1,y1,x2,y2值的范围
29 都是0~1
30 */
31 transition-timing-function: cubic-bezier(0.4,0.2,0.5,0.7);
32 /*延迟时长：延迟多久开始*/
34 transition-delay: 2s;
35 /*transition: all width,background 2s cubic-bezier(0.4,0.2,0.5,0.7) 2s;*/
36 }
37 /*再触发时机中,更改你想要看属性动画的那个属性的值*/
38 .div1:hover{
39 width: 500px;
40 background: pink;
41 height: 500px;
42 }
43 .div2{
44 width: 200px;
45 height: 200px;
46 background: pink;
47 /*过渡动画*/
48 transition: all 2s linear ;
49 }
50 .div2:hover{
51 /*所有的属性都支持形变的*/
52 /*transform:多组形变用空格
53 background:多组之间用","号
54 */
55 /*形变中平移其实真正的位置没有改变,移动就是个假象*/
56 /*transform: translate(300px,100px) ;*/
57 opacity: 0.5;
58 /*margin-left:是真实改变*/
59 margin-left: 300px;
60 }
61 .text{
62 transition: 2s;
63 height: 100px;
64 }
65 /*过渡动画的focus时机*/
66 .text:focus{
67 height: 300px;
68 }
69 .check{
70 margin-top: 50px;
71 transition: 2s;
72 }
73 .check:checked{
74 margin-top: 200px;
75 }
76
77
78 .div3{
79 width: 200px;
80 height: 200px;
81 background: yellow;
82 transition: 2s;
83 }
84 @media only screen and (min-width:800px ) {
85 .div3{
86 width: 500px;
87 }
88 }
89 </style>
90 </head>
91 <body>
92 <p>eg1：</p>
93 <div class="div1"></div>
94 <hr />
95
96 <p>eg2：</p>
97 <div class="div2"></div>
98 <hr />
99
100 <p>eg3：</p>
101 <form action="###">
102 <!--
103 input:我们没有设置宽高,就可以看到它(特殊性),对于它设置宽高
104 动画的时候,避免兼容性问题,一般要设置初始宽高
105 *所有属性设置过渡动画的时候,一般给该属性设置初始值
106 -->
107 <input type="text" class="text" value="" />
108 <br />
109 <input type="checkbox" class="check" />
110 </form>
111 <hr /
112
113 <p>eg4：</p>
114 <!--媒体查询时机的例子-->
115 <div class="div3"></div>
116 </body>
117 </html>