animation学习笔记
简单了解animation
CSS Animations 是CSS的一个模块,它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间,它们的重复次数以及它们如何重复来控制。
兼容性
目前从Can I Use查到浏览器的兼容性还是可以的。
Animation,一个简写属性
是由 animation-name,animation-duration, animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode 和 animation-play-state这八个属性组成的。下面逐一详细介绍这些属性。
@keyframes 关键帧规则
首先还是得先了解一下这个动画是由每一帧的变化所构成的,因此我们需要定义关键帧的样式,从而控制动画的效果。
@keyframes 这里自定义一个名称
例如
@keyframes go{
//等效于0%
from:{
}
//等效于100%
to:{
}
}
这里的form和to就是触发关键帧的时间点,也可以用百分比表示
@keyframes go{
0%:{
}
50%{
}
100%:{
}
}
如果一个@keyframes 里的关键帧的百分比存在重复的情况,以最后一次定义的关键帧为准。 因为@keyframes
的规则不存在层叠样式(cascade)的情况,即使多个关键帧设置相同的百分值也不会全部执行。
关键帧中出现的 !important 关键词将会被忽略
animation-name
animation-name指定应用的一系列动画,这里后面填的是keyframes的名称,可以填多个复合动画名。
animation-name:go slidein;//这里的每一个名称go或者slidein必须在keyframes里定义。
animation-duration
这个表示的是定义一个动画的一个周期时长,默认为0s,即不执行动画。注意没有单位无效哦,并且这个属性直接关系到动画执行与否。也是一个复合属性,可以写多个动画的周期时长
animation-duration: 10s, 30s, 230ms//没有单位无效
animation-timing-function
表示在一个过渡或动画中一维数值的改变速度,与transition里的一样,可以用三次贝塞尔曲线,速度曲线。cubic-bezier()、ease-in(加速)、ease-out(减速)、ease-in-out(先加速后减速)、linear(匀速),也是可以写多个值,套用于多个动画。
。更多了解可以查看mdn
animation-delay 设置动画延时
定义动画开始前的等待时间,这个属性非一定要设置。,也是可以写多个值,套用于多个动画。
如果设置为负值的话直接跳到那秒运行。
animation-duration:4s;//当前动画执行4s
animation-delay:-3s;//动画开始直接跳到第3s动画
animation-direction动画方向设置
normal | 动画向前循环,循环结束到起点重新开始 |
---|---|
reverse | 动画反向播放 |
alternate | 动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放。 |
alternate-reverse | 动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放。 |
initial | 默认值 |
inherit | 从父元素继承 |
animation-iteration-count 动画在结束前运行的次数
可以是1次,0.5次代表运行到动画周期的一半,也可以是infinite(无限循环)。
animation-fill-mode
- none 默认值 动画没执行时采用元素的默认样式
- forwards 保存元素执行期间最后一个关键帧计算值。 最后一个关键帧取决于animation-direction和animation-iteration-count的值:
- backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值,并在animation-delay期间保留此值。保持目标动画第一帧的样式, 第一个关键帧取决于animation-direction的值:
- both 将同时运用forwards和backwards的规则。
看到一个很好解释这个的,转载一下链接新世界的回答
animation-play-state 定义一个动画是否运行或者暂停
参数running,paused。
animation 相关事件
- animationstart 当动画帧被调用并且元素开始运动时执行
- animationiteration 动画帧重新运动时执行(比如运动次数为2 那第二次时候会执行)
- animationend 当动画帧被调用并且元素结束运动时执行
案例实战
球Duang的效果
div{
width: 50px;
height: 50px;
background-color: rgb(55, 55, 247);
border-radius: 50%;
font-size: 12px;
text-align: center;
color: #fff;
line-height: 50px;
margin: 120px auto;
}
.duang{
animation: duang 1s ease;
}
@keyframes duang{
0% {
transform: scale(1, 1);
}
20% {
transform: scale(1.2, .8);
}
40% {
transform: scale(.8, 1.2);
}
60% {
transform: scale(1.1, .9);
}
80% {
transform: scale(.9, 1.1);
}
100% {
transform: scale(1, 1);
}
}
//JS
var btn = document.querySelector('div');
// hover事件
btn.onmouseover = function(){
btn.classList.add('duang');
}
// 动画结束事件
btn.onanimationend = function(){
btn.classList.remove('duang');
}