css3动画animation学习笔记_animation mdn-CSDN博客

本文链接：https://blog.csdn.net/zhala9251/article/details/105198668

animation学习笔记

简单了解animation

CSS Animations 是CSS的一个模块，它定义了如何用关键帧来随时间推移对CSS属性的值进行动画处理。关键帧动画的行为可以通过指定它们的持续时间，它们的重复次数以及它们如何重复来控制。

兼容性

目前从Can I Use查到浏览器的兼容性还是可以的。
animation浏览器兼容性

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');
    }