css动画
* {
padding: 0;
margin: 0;
}
body {
width: 100vw;
height: 100vh;
background-color: #2c3e50;
display: flex;
justify-content: center;
align-items: center;
}
main {
width: 100px;
height: 100px;
background: #fff;
animation-name: hd;
animation-duration: 2s;
}
@keyframes hd {
0% {
background: #000;
}
25% {
transform: scale(2);
}
65% {
transform: scale(1);
}
100% {
background: #e74c3c;
}
}
- flex布局
- 颜色选取网站
- 简单动画
- 定义动画**@keyframes name**
- 动画形式animation-name
成果
- 不设置起始或者终点帧,系统用元素默认状态来展示
@keyframes hd {
25%{
transform: translateX(300px);
}
50%{
transform: translate(300px,300px);
}
75%{
transform: translateY(300px);
}
让小方块沿着周围运动,起始位置和默认位置不用加动画帧,直接用默认的