过渡动画
transition:width 500ms(执行500毫秒) ease,height 500ms ease 500ms(延迟),background-color 500ms ease 1s
变成圆角
transition:border-radius 500ms ease;
所有的一起
transition:all 500ms
设置过度的运动方式
transition-timing-function
div:nth-child(1){
transition:all 1s ease(匀速)|ease-in(开始快)|ease-out(越来越快 突然停止)|ease-in-out(开始和结束时候慢)
}
作业代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画截图</title>
<style type="text/css">
.bian{
width: 302px;
height: 129px;
margin: 0 auto;
border: 1px solid black;
}
.zi{
width: 69px;
height: 17px;
display: block;
margin: 0 auto;
margin-top: 104px;
}
.b1{
float: left;
width: 30px;
height: 36px;
background-color: red;
margin-top: 32px;
margin-left:16px;
border-radius: 10px;/*变成椭圆*/
animation: dong 1s ease 1ms infinite;
}
.b2{
float: left;
width: 30px;
height: 36px;
background-color: green;
margin-top: 32px;
margin-left:29px;
border-radius: 10px;
animation: dong 1s ease 100ms infinite;
}
.b3{
float: left;
width: 30px;
height: 36px;
background-color: #ffc1cd;
margin-top: 32px;
margin-left:29px;
border-radius: 10px;
animation: dong 1s ease 200ms infinite;
}
.b4{
float: left;
width: 30px;
height: 36px;
background-color: greenyellow;
margin-top: 32px;
margin-left:29px;
border-radius: 10px;
animation: dong 1s ease 300ms infinite;
}
.b5{
float: left;
width: 30px;
height: 36px;
background-color: cyan;
margin-top: 32px;
margin-left:29px;
border-radius: 10px;
animation: dong 1s ease 400ms infinite;
}
@keyframes dong {
from{
height: 30px;/*原本 后来 进度 刚开始的什么样*/
}
to{
transform: scale(1,2);/*缩放 前边原本宽的倍数 后边原本高的倍数 */
}
}
</style>
</head>
<body>
<div class="bian">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
<div class="b4"></div>
<div class="b5"></div>
<span class="zi">loading...</span>
</div>
</body>
</html>
作业
动画.png
动画.png