CSS使用过渡和动画
鼠标过渡
代码片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
margin: 0 auto; //居中
width: 400px; //p标签的静态样式
height: 400px; //p标签的静态样式
background-color: #ff7d82; //p标签的静态样式
}
p:hover{
width: 800px; //过渡后的样式
height: 800px; //过渡后的样式
background-color: #e6e8ea; //过渡后的样式
transition-delay: 0.2s; /*触发延迟时间*/
transition-duration:1000ms; /*过渡持续时间*/
}
</style>
</head>
<body >
<p></p>
</body>
</html>
-
transition-property:background-color;
可以选择要进行过渡的内容,e.g. width height color等 -
transition-timing-function: ease-in-out;
使用贝塞尔曲线控制速度- ease 默认状态,匀速
- ease-in 减速
- ease-out 加速
- ease-in-out 先减速后加速
Animation
代码片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
background: skyblue;
margin: 0 auto;
}
p:hover{
-webkit-animation-duration: 2s;
-moz-animation-duration: 800ms;
-o-animation-duration: 800ms;
animation-duration: 800ms; /*duration*/
-webkit-animation-delay: 100ms;
-moz-animation-delay: 100ms;
-o-animation-delay: 100ms;
animation-delay: 100ms; /*delay*/
-webkit-animation-name: aini;
-moz-animation-name: aini;
-o-animation-name: aini;
animation-name: aini; /*name*/
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite; /*次数*/
animation-direction: alternate; /*反方向运行*/
}
@keyframes aini {
from{
width: 600px;
height: 600px;
background-color: palevioletred;
}
to{
width: 700px;
height: 700px;
background-color: lightskyblue;
}
}
</style>
</head>
<body>
<p></p>
</body>
</html>
-
animation-iteration-count: infinite;
设置循环的次数-
infinite
无限次循环 -
revert
循环一次 - 加数字,循环具体次数
-
-
animation-direction:alternate
设置反方向运行
当@keyframes中有from属性时,动画会从from开始,至to结束,当没有from时,将会由原属性至to,大约每两个属性之间时间都是相同的
区别
- 过渡在鼠标点击之后会暂停,当动作停止时会停在结束样式上。
- 而动画会按照约定的动作一直进行下去。直到结束再停止,恢复最初的状态。