你的位置:首页 > 网页设计

[网页设计]transtion:过渡动画

动画分为:

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>