css3动画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');
    }
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值