CSS使用动画
动画速度变换
- transition-timing-function
- ease
- ease-in:先慢后快
- ease-out:先快后慢
- ease-in-out:开头结尾快
- linear:线性速度
动画属性
- animation
- name:相当于之前的id
- iteration-count:动画播放次数
- direction:第二次反方向
- @keyframes + id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<style type="text/css">
p {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
p:hover{
animation-duration: 1000ms;
animation-delay: 200ms;
animation-name: RectangleDilation;
animation-iteration-count: 3;
animation-direction: alternate;
}
@keyframes RectangleDilation{
from{
width: 100px;
height: 100px;
background-color: #FFEC32;
}
50%{
width: 130px;
height: 130px;
background-color: #3b88ff;
}
75%{
width: 160px;
height: 160px;
background-color: #58ff4a;
}
to{
width: 200px;
height: 200px;
background-color: #ffad2a;
}
}
</style>
</head>
<body>
<p></p>
</body>
</html>