赞
踩
CSS trnasition提供了一种在更改CSS属性时控制动画速度的方法。
可以让CSS的属性变化称为一个秩序一段时间的过程,而不是默认的立即生效
比如在基础9中我们学到的trnaslate可以让一个元素移动,但瞬间就完成了
我们可以利用trnasition让这个完成的过程有一定的动画效果
属性可以控制的内容
可以通过MDN查询
月度CSS属性的文档说明
.box:hover {
transform: skew(10deg);
transition-property: transform;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s;
}
前面我们学习了trnasition来进行过度动画,但过渡动画有如下缺点
那么animation就是更为复杂的动画,可以解决以上问题
比如,我们要将一个盒子先向下平移,再向右,最后向上
@keyframes translateAnimation {
0% {
transform: translate(0, 0);
}
33% {
transform: translate(0, 100px);
}
66% {
transform: translate(200px, 100px);
}
100% {
transform: translate(200px, 0px);
}
}
举例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .box { width: 100px; height: 100px; background-color: pink; animation: translateAnimation 2s ease 1s 2 normal forwards; } @keyframes translateAnimation { 0% { transform: translate(0, 0); } 33% { transform: translate(0, 100px); } 66% { transform: translate(200px, 100px); } 100% { transform: translate(200px, 0px); } } </style> </head> <body> <div class="box"></div> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。