过渡--transition
过渡这个属性的作用是当元素的样式发生变化时,使用动画的效果进行变化。有了过渡属性后,很多情况下,写一些简单效果,将不需要再借助 javascript 去计算。
transition 过渡属性简写,可以设置四个值
transition-property 过渡的CSS的名字,或是all
transition-duration 从一个状态到另一个状态的的时间
transition-timing-function 过渡效果的动画曲线,默认easy,linear是匀速,cubic-bezier(n,n,n,n)可以自定义动画曲线
transition-delay 延时
下面是利用CSS3过渡制作的一个旋转方块,鼠标移入方块后等待1s,然后10s 内匀速旋转 3600deg。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div class="box"></div> 9 <style> 10 .box{ 11 width: 200px; 12 height: 200px; 13 background: red; 14 margin: 0 auto; 15 transition:all 10s linear 1s; 16 } 17 .box:hover{ 18 transform: rotate(3600deg); 19 } 20 </style> 21 </body> 22 </html>
动画--animation
过渡是当元素状态发生改变时,触发了过渡的动画效果,而动画属性,则是当页面打开时,就开始执行了,一直到执行结束或页面关闭。
执行动画时,是需要先定义动画规则,有了规则,元素才可以按照预设规则执行动画效果。定义动画规则时,是使用 @keyframes 来设置。
用法如下:
@keyframes animation_name{ 0%{ width:200px; } 100%{ width:400px; } }
以上代码的规则是表示,规则名字是animation_name,规则是某个元素的宽度从 200px 到400px 。
animation属性可以添加的值有以下几条:
animation:动画属性的简写
animation-name:动画规则的名称
animation-duration:动画执行一个周期的时间
animation-timing-function:动画的运动曲线
animation-delay:延时
animation-iteration-count:动画执行次数,默认是1,infinite是无穷次
animation-direction:默认是normal,alternate表示可逆向播放
animation-play-state:动画运行或暂停,running/paused
下面是一个小例子,运行在浏览器中是,一个小方块,在打开页面后就开始匀速可逆性的转动,而且一直在转动不会停止,点击停止,再次点击,继续转动。
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <div class="box"></div> 9 <style> 10 .box{ 11 width: 200px; 12 height: 200px; 13 background: red; 14 margin: 0 auto; 15 animation:zhuan .5s linear infinite alternate; 16 } 17 @keyframes zhuan{ 18 0%{ 19 transform:rotate(0deg); 20 } 21 100%{ 22 transform:rotate(180deg); 23 } 24 } 25 </style> 26 </body> 27 </html> 28 <script> 29 var box = document.getElementsByClassName('box')[0]; 30 var flag = true; 31 box.onclick = function () { 32 if (flag) { 33 box.style.animationPlayState = 'paused'; 34 }else{ 35 box.style.animationPlayState = 'running'; 36 } 37 flag = !flag; 38 } 39 </script>