CSS 动画：animation和transition

xiaoxiao2021-02-27 287

animation

animation使用时必须配合@keyframes

<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -webkit-animation:mymove 5s infinite; /*Safari and Chrome*/ } @keyframes mymove { from {left:0px;} to {left:200px;} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} } </style> </head> <body> <p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p> <div></div> </body> </html>

运行结果可见：http://www.w3school.com.cn/tiy/t.asp?f=css3_animation

transition

<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } div:hover { width:300px; } </style> </head> <body> <div></div> <p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> </body> </html>

示例：http://www.w3school.com.cn/tiy/t.asp?f=css3_transition

除了使用hover，我们也可以这样写：

<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:blue; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* Opera */ } .widthnew{ width:300px; } </style> </head> <body> <div onclick="changewidth()"></div> </body> <script type="text/javascript"> function changewidth(){ console.log("console"); document.querySelector("div").className = 'widthnew'; } </script> </html>

转载请注明原文地址: https://www.6miu.com/read-5186.html

技术

最新回复(0)