一、动画(animation)
1.动画概述
可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。
2.语法
1.0%是动画的开始可以用from替代,100%是动画的完成可用to替代。
2.在CSS中用@keyframes中定义动画的样式,在用选择器调用animation调用动画
3.动画是是元素从一种样式逐渐变化成另一种样式的效果。可以任意改变动画节点。
@keyframes 动画名称 {
0%{
初始状态属性
}
100%{
结束状态属性
}
}
div {
<!--调用动画-->
animation-name:动画名称;
<!--动画持续时间-->
animation-duration:time;
}
3.用法
@keyframes move {
/* 初始状态 */
0% {
transform: translate(0, 0);
}
/* 结束状态 */
100% {
transform: translate(1200px, 0);
}
}
.box1 {
background-color: #f34;
/* 调用动画名称 */
animation-name: move;
/* 动画持续时间 */
animation-duration: 3s;
}
4.多个动画序列用法
@keyframes move {
/* 初始状态 */
0% {
transform: translate(0, 0);
}
/* 百分比是动画总时间的百分比:10s+25%=2.5s */
/* 百分比要是整数 */
25% {
transform: translate(1200px, 0);
}
/* 移动的位置时相对于初始位置,不是相对于自身 */
50% {
transform: translate(1200px, 500px);
}
75% {
transform: translate(0, 500px);
}
100% {
transform: translate(0, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: #f34