CSS动画-Animation
一、动画介绍
动画( animation)
是CSS3
中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制的效果。
二、动画组成
制作动画分为两个部分:
@keyframes
定义动画animation属性
调用动画
三、@keyframes(关键帧) 定义动画
创建动画的原理是,将一套 CSS
样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 CSS
样式。以百分比来规定改变发生的时间,或者通过关键词 from
和 to
,等价于 0%
和 100%
。
示例
<body><main><div></div></main>
</body>
body {margin: 0;padding: 0;width: 100vw;height: 100vh;background-color: #2E3E54;display: grid;
}main {width: 400px;height: 400px;background-color: rgb(51, 139, 109);padding: 20px;justify-self: center;align-self: center;
}div {width: 50px;height: 50px;background-color: coral;border-radius: 50%;animation-name: move;animation-duration: 4s;
}/* move为动画名 自定义 */
@keyframes move {0% {transform: translate(0, 0);}25% {transform: translate(350px, 0);}50% {transform: translate(350px, 350px);}75% {transform: translate(0, 350px);}100% {transform: translate(0, 0);}
}
四、动画属性 ★★★
属性 | 作用 |
---|---|
animation |
除了animation-play-state 之外的所有属性简写
|
animation-name | 需要使用的动画名(必须) |
animation-duration | 规定动画完成一个周期所花费的时间 (必须) |
animation-timing-function |
规定动画的速率曲线,默认是 ease
|
aniamtion-delay | 规定动画延迟执行的时间,默认 0 |
animation-iteration-count | 规定动画执行的次数,默认是1 |
animation-direction |
规定动画是否在下一周期逆向播放,默认是 normal
|
animation-play-state |
规定动画运行/暂停 默认是 running
|
animation-fill-mode | 规定动画结束后状态,默认回到初始状态 |
1. animation-name
animation-name:
就是需要绑定的@keyframes
的名称
div {width: 50px;height: 50px;animation-name: move;
}@keyframes move {to {transform: translateX(400px);}
}
这就是定义了一个名称为move
的动画,被div
元素调用
2. animation-duration
animation-duration:
规定动画完成一个周期所花费的时间
div {width: 50px;height: 50px;animation-name: move;animation-duration: 2s;
}@keyframes move {to {transform: translateX(400px);}
}
意思是指定div
元素2s
的时间向右移动400px
3. animation-timing-function
animation-timing-function:
规定动画的速率曲线,也就是动画执行过程的速度变化,默认是 ease
属性
属性 | 说明 |
---|---|
ease | 默认。动画以低速开始,然后加快,在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中自己的值 值是从 0 到 1 的数值 |
step-start | 在变化过程中,都是以下一帧的显示效果来填充间隔动画 |
step-end | 在变化过程中,都是以上一帧的显示效果来填充间隔动画 |
steps() |
可以传入两个参数,第一个是一个大于0的整数,他是将间隔动画等分成指定数目的小间隔动画,也就是指定每个阶段分为几步来展示动画 ,然后根据第二个参数来决定显示效果。第二个参数设置后 其实和step-start ,step-end 同义,在分成的小间隔动画中判断显示效果。
|
linear | 动画从头到尾的速度是相同的 |
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画速率</title><style>body {margin: 0;padding: 0 10px;width: 100vw;height: 100vh;overflow: hidden;background-color: #2E3E54;display: grid;grid-template: 1fr / 1fr;}.box {display: grid;grid-template: 1fr / repeat(6, 1fr);column-gap: 10px;}.box>div {background-color: chocolate;animation-name: move;animation-duration: 4s;}.box div:nth-child(1) {animation-timing-function: ease;}.box div:nth-child(2) {animation-timing-function: ease-in;}.box div:nth-child(3) {animation-timing-function: ease-out;}.box div:nth-child(4) {animation-timing-function: ease-in-out;}.box div:nth-child(5) {animation-timing-function: linear;}.box div:nth-child(6) {animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);}@keyframes move {to {transform: translateY(calc(100vh - 100px));}}</style>
</head><body><div class="box"><div>ease(默认)</div><div>ease-in</div><div>ease-out</div><div>ease-in-out</div><div>linear</div><div>bezier(自定义)</div></div>
</body></html>
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画速率</title><style>body {margin: 0;padding: 0 10px;width: 100vw;height: 100vh;overflow: hidden;background-color: #2E3E54;display: grid;grid-template: 1fr / 1fr;}.box {display: grid;grid-template: 1fr / repeat(3, 1fr);column-gap: 10px;}.box>div {background-color: chocolate;animation-name: move;animation-duration: 4s;}.box div:nth-child(1) {animation-timing-function: step-start;}.box div:nth-child(2) {animation-timing-function: step-end;}.box div:nth-child(3) {animation-timing-function: steps(2, start);}@keyframes move {25% {transform: translateY(20vh);}50% {transform: translateY(40vh);}75% {transform: translateY(70vh);}to {transform: translateY(90vh);}}</style>
</head><body><div class="box"><div>step-start</div><div>step-end</div><div>steps(2, start)</div></div>
</body></html>
4. aniamtion-delay
aniamtion-delay:
规定动画延迟执行的时间,默认 0s,即立刻执行
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>delay</title><style>body {margin: 0;padding: 10px;width: 100vw;height: 100vh;overflow: hidden;background-color: #2E3E54;display: grid;grid-template: 1fr / 1fr;}div {width: 50px;height: 50px;background-color: aliceblue;border-radius: 50%;animation-name: move;animation-duration: 1s;animation-delay: 2s;}@keyframes move {to {transform: translateX(300px);}}</style>
</head><body><div></div>
</body></html>
以上代码给div
定义一个往右移动300px
的动画,因为设置了animation-delay: 2s;
所以会延迟两秒再执行动画
5. animation-iteration-count
animation-iteration-count:
规定动画执行的次数,默认是 1
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation-iteration-count</title><style>body {margin: 0;padding: 10px;width: 100vw;height: 100vh;overflow: hidden;background-color: #2E3E54;display: grid;grid-template: 1fr / 1fr;}.box {width: 400px;height: 400px;background-color: cornflowerblue;align-self: center;justify-self: center;display: grid;grid-template: repeat(3, 1fr) / 1fr;row-gap: 10px;}.box>div {width: 50px;background-color: rgb(220, 229, 94);text-align: center;line-height: calc(400px / 3 - 20px);animation: wq;animation-duration: 1s;}.box>div:nth-child(1) {animation-iteration-count: 1;}.box>div:nth-child(2) {animation-iteration-count: 3;}.box>div:nth-child(3) {animation-iteration-count: infinite;}@keyframes wq {to {width: 400px;}}</style>
</head><body><div class="box"><div>1</div><div>3</div><div>infinite</div></div>
</body></html>
6. animation-direction
animation-direction:
规定动画是否在下一周期逆向播放,默认是 normal
属性
normal
正序播放(播放结束立刻回到元素初始状态)reverse
倒序播放alternate
交替播放 (动画在奇数次(1、3、5…)正向播放,在偶数次(2、4、6…)反向播放)alternate-reverse
反交替播放inherit
从父元素继承该属性
如果动画只执行一次,那么animation-direction
将无效
示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation-diraction</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw==" crossorigin="anonymous" referrerpolicy="no-referrer" /><style>.box {width: 100vw;height: 100vh;background-color: #2E3E54;display: flex;justify-content: center;align-items: center;}ul {list-style: none;width: 600px;height: 200px;display: flex;}li{flex: 1;color: #f3462c;display: flex;justify-content: center;align-items: center;position: relative;}li:nth-child(1) i {animation-direction: normal;}li:nth-child(2) i {animation-direction: reverse;}li:nth-child(3) i {animation-direction: alternate;}li:nth-child(4) i {animation-direction: alternate-reverse;}li .fa {animation-name: big;animation-duration: 2s;animation-iteration-count: infinite;font-size: 2em;}li span {position: absolute;bottom: 0;}@keyframes big {to {transform: scale(3);}}</style>
</head>
<body><div class="box"><ul><li><i class="fa fa-heart"></i><span>normal</span></li><li><i class="fa fa-heart"></i><span>reverse</span></li><li><i class="fa fa-heart"></i><span>alternate</span></li><li><i class="fa fa-heart"></i><span>alternate-reverse</span></li></ul></div>
</body>
</html>
7. animation-play-state
animation-play-state:
规定动画运行/暂停 默认是 running
属性
running
运行
paused
暂停
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation-iteration-count</title><style>body {margin: 0;padding: 0;width: 100vw;height: 100vh;overflow: hidden;background-color: #2E3E54;display: grid;grid-template: 1fr / 1fr;}div {width: 100px;height: 100px;background-color: darkturquoise;justify-self: center;align-self: center;animation-name: rotate;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: linear;}div:hover {animation-play-state: paused;}@keyframes rotate {to {transform: rotate(360deg);}}</style>
</head><body><div></div>
</body></html>
8. animation-fill-mode
animation-fill-mode:
规定动画结束后展示的状态,默认回到初始状态
属性
属性 | 说明 |
---|---|
none | 动画执行前后不改变任何样式 |
backwards | 保持目标动画第一帧的样式 |
forwards | 保持目标动画最后一帧的样式 |
both |
动画将遵循开始和结束后的帧动画进行停留,也就是说会从第一帧开始停留显示,动画执行之后会停留到动画结束时的状态;与上面两个值的差别是,如果元素使用 forwards 、backwards 两个值会在没有添加动画之前的展示状态进行停留,执行动画的时候才会开始执行关键帧,有这么一些细小的差别。
|
示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>animation-iteration-count</title><style>body {margin: 0;padding: 0;width: 100vw;height: 100vh;overflow: hidden;background-color: #2E3E54;display: grid;grid-template: 1fr / repeat(4, 1fr);}div {width: 100px;height: 50px;background-color: aquamarine;justify-self: center;align-self: flex-end;animation-name: wq;animation-duration: 2s;animation-delay: 2s;}div:nth-child(1) {animation-fill-mode: none;}div:nth-child(2) {animation-fill-mode: backwards;}div:nth-child(3) {animation-fill-mode: forwards;}div:nth-child(4) {animation-fill-mode: both;}@keyframes wq {0% {height: 100px;}50% {height: 60vh;}100% {height: 100vh;}}</style>
</head><body><div>none</div><div>backwards</div><div>forwards</div><div>both</div>
</body></html>
9. animation 简写
- 简写属性里面不包含 animation- play-state
animation: name duration timing-function delay iteration-count direction fill-mode;/* 动画名称 */
/* animation-name: move; */
/* 持续时间 */
/* animation-duration: 2s; */
/* 速度曲线 */
/* animation-timing-function: ease-in; */
/* 何时开始 */
/* animation-delay: 1s; */
/* 重复次数 */
/* animation-iteration-count: 2; */
/* 是否逆向播放 */
/* animation-direction: alternate; */
/* 结束后状态 */
/* animation-fill-mode: forwards; */animation: move 2s linear 0s infinite alternate forwards;
- 注意:先使用的时间一定是动画持续时间
animation-duration
CSS动画-Animation相关推荐
- css动画animation详细解读
以一个小球为例 向右匀速运动200px 然后再移动回来,然后再移动到200px处 停在那里 效果如下 div{width:40px;height:40px;border-radius:50%; ...
- css动画-animation各个属性详解(转)
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
- HTML5 CSS动画 animation使用
首先看一下页面的布局 <body><div class="box1"><div class="box2"></div& ...
- css动画 animation
今天用css做了一个简单的三角上下移动的一个小动画,说白了就是在改变该物体的height值.除了这个方法,还可以用js. 一.在用css写动画时,一定要记住兼容性问题.如何解决该兼容性?在前面加内核前 ...
- css动画 animation
1. 线性渐变 线性渐变指的是颜色沿一条直线进行渐变(例如右上到下,从左到右等),要创建线性渐变,您至少需要定义两个色标(色标指的是想要平滑过渡的颜色),若要创建更加复杂的渐变效果,则需要定义更多的色 ...
- css动画-animation各个属性详解(通俗易懂)
https://blog.csdn.net/chritina/article/details/99623017
- CSS动画实现心跳效果
CSS动画实现心跳效果 简介 实现步骤 代码 效果 简介 使用CSS动画animation 和tranform(缩放.旋转). 实现步骤 添加p元素内容之前/之后插入,一个宽为100px,高为160p ...
- html怎么添加积分系统,CSS动画实现领积分效果的思路详解
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...
- html5监听动画结束,js判断css动画是否完成 animation,transition
气死了,发现这些鸟人讲事情都讲一半,害死初学者. css动画有两种,animation,transition,所以分开来讲. 1.animation: css定义 #left1{} html定义: 安 ...
- css动画(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...
最新文章
- Mathematica 画图操作中的一些小惊喜
- Runnable、Callable、Executor、Future、FutureTask关系解读
- jmeter接口测试多数据组合登陆场景
- 教育部:2006年江西高职(专科)院校名单
- upload-labs_pass10_点空点绕过_pass11_双写文件扩展名
- python中的运算和运算符
- Android 带着用户名的SharedPreferences
- 一些常用算法 练手的的代码
- 逾期数据波动有可能是催收策略调整,你清楚吗?
- 利用Python K-means实现简单图像聚类
- 用完HttpWebResponse时别忘了调用Close方法
- 2017.8.15 数据库
- java delphi aes加密算法_AES加密算法(Delphi源码)
- android 过滤蓝光软件下载,蓝光过滤器app下载-蓝光过滤器(熬夜护眼必备)下载v1.4.7安卓版-西西软件下载...
- 自定义控件:Flag标签
- 分布临界值表python
- 计算机打字的基础知识,学习电脑打字基础知识
- Point and Ask: Incorporating Pointing into VQA论文笔记
- 1.CDC绘图。包括加载图片,消去图片,设置图片一部分透明,不闪烁方式。
- git 拉取其他分支代码
热门文章
- 苹果id可以彻底注销吗_如何注销苹果id账号
- 前端播放flv的视频
- 计算机专业女生网名,微信名字大全女生_女孩微信网名大全
- qq登录界面句柄_天天玩QQ!知道登录界面那两个人是谁吗?网友:不是情侣?...
- c语言ld怎么声明,ld C语言编程开发
- excel粘贴时出现故障_你必将碰到的巨崩溃的问题,Excel复制粘贴时,突然提示“不同单元格格式太多“,我快疯了......
- 锂电池基本原理解析:充电及放电机制
- c语言厘米换算分米程序设计,厘米和分米换算(米和厘米换算)
- 2019西安交大计算机专业研究生分数线,西安交通大学公布2019年硕士研究生招生复试基本分数线...
- Win10--YOLOX训练和测试VOC格式数据