1. 触发式动画
只需要规定起始帧和结束帧
(1)参数
过渡动画时间:transition-duration
过渡动画延迟:transition-delay
动画帧速率: transition-timing-function
linear : 匀速
ease: 慢,快,慢
ease-in : 慢 ,快
ease-out: 快,慢
cubic-bezier(a,b,c,d); 贝塞尔曲线
过渡动画属性: transition- property
限定哪些属性样式变化
all:默认所有
复合样式:属性名 过渡时间 过度动画时间函数 动画延迟时间;
display:none --> display: block 没有动画效果
opacity: 1 --> opacity: 0 有动画效果 轮播淡入淡出效果
div {
width: 200px;
height: 200px;
transition: 1s;
background-color: pink;
}
div:hover {
width: 500px;
}
2. 主动式动画
创建动画帧:
@keyframes 动画名称{
0%{
样式1
}
1%{
样式2
}
...
100%{
样式
}
}
语法:
顺序无要求
animation: name duration timing-function delay iteration-count direction;
参数:
-
animation-name:需要绑定的动画名称
-
animation-duration:完成动画的时间
-
animation-timing-function:动画的速度曲线
linear : 匀速
ease: 慢,快,慢
ease-in : 慢 ,快
ease-out: 快,慢
cubic-bezier(a,b,c,d); 贝塞尔曲线 -
animation-delay:动画延迟时间
-
animation-iteration-count:动画播放次数
- infinite 无限次
animation-direction: 定义动画是否反向播放
reverse 反向(反方向)
alternate 反向(来回方向相反)
animation-play-state: paused; 暂停
body:hover{
animation-play-state: paused;
}
div {
width: 200px;
height: 200px;
animation: animate 1s infinite alternate;
background-color: pink;
}
@keyframes animate {
0% {
width: 200px;
}
100% {
width: 500px;
}
}