您的位置:制图网首页 -> 新闻动态 -> css动画分类【CSS动画分类的基本概念】

热门排行

css动画分类【CSS动画分类的基本概念】

2023/1/31 来自于:制图网 点击:35

CSS 动画主要分为CSS 动画分类和CSS 常用动画库简介与JS 动画;然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes,keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与JS 动画主要是Animate.css 的引入、Animate.css 使用举例和JS 动画。

首先,CSS动画分类的基本概念:

1 过渡动画(transition)

从初始状态过渡到结束状态所产生的动画,它只能定义初始和借宿两个状态,不能定义中间状态,它是一种很简单的最基础的css动画,这个过渡动画只能被动触发,不能主动触发,而且也不能重复发生。被动触发一次,它发生一次,不能重复。

2 关键帧动画(Animation)

使用关键帧@keyframes,在关键帧里面的写法如下:

在每一个阶段我们可以定义不同的元素状态,也就是css,这样就大大增强了css的动画能力。

总结起来就是:可以定义多个状态,可以实现更复杂的效果,相对于transition它可以主动的触发,也可以重复发生。

@keyframes 动画名称 { 时间点 { 元素状态 } 时间点 { 元素状态 } 时间点 { 元素状态 } 时间点 { 元素状态 } … } 其次 浏览器支持

完全支持该属性的第一个浏览器版本

css动画分类【CSS动画分类的基本概念】

基本语法.main { animation: animationname(动画名字) duration(持续时间) timing-function(时间运动曲线) delay(延迟) iteration-count(总共重复的次数) direction(方向,正向播放还是反向播放) fill-mode(定义开始和结束的状态) play-state(是否停止或运行这个动画); } ​ //animationname是和keyframes绑定的,在animationname下面定义动画的状态,一种是from...to从开始到结束,这个是和transition一样的,一种是百分比,从0%到100%,可以定义任意的中间状态。 @keyframes animationname { from { css-code } to { css-code } ​ 0% - 100% { css-code } }

1 animationname - 关键帧名称

.main { animation-name: round; animation-duration: 5s; animation-iteration-count: infinite; } ​ @keyframes round { from { css-code } to { css-code } ​ 0% - 100% { css-code } }

2 duration - 动画持续时间(单位:s/ms)

.main { width: 100px; height: 100px; background: red; position: relative; animation-name: round; animation-duration: 500ms; animation-iteration-count: infinite; } @keyframes round { 0% { top: 0%; left: 0%; background: red; } 25% { top: 0%; left: calc(100% - 100px); background: blue; } 50% { top: calc(100% - 100px); left: calc(100% - 100px); background: yellow; } 75% { top: calc(100% - 100px); left: 0%; background: green; } 100% { top: 0%; left: 0%; background: red; } }

3 timing-function - 时间函数曲线

.main { animation-name: round; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); //贝塞尔曲线 }

timing-function 在animation里面的时间区间是两套css样式之间

4 delay - 动画开始延迟时间(单位:s/ms)

仅定义第一次开始延迟时间

.main { animation-name: round; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); animation-delay: 3s; }

5 iteration-count - 动画播放次数

.main { animation-name: round; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); animation-delay: 3s; }

在transition里面是不能定义播放次数的,但是animation可以,它可以定义两种:一种是具体的播放次数(n),一种是无限循环(infinite)。

6 direction - 动画播放方向

动画实际上是相对于时间来讲的,它的播放方向就是正向还是反向播放。它有四个值,分别是:

normal(正常播放)、reverse(反向播放)、alternate(奇数次正向,偶数次反向)、alternate-reverse(偶数次正向,奇数次反向)。

.main { animation-name: round; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); animation-delay: 3s; animation-direction: alternate; }

7 fill-mode - 动画不播放时应用到元素的样式

分为两个状态,一个是还没有开始放,另一个是放完了,也就是说它的循环次数不是无限次的,那么对应的有两个值比较关键:forwards 动画结束后动画将应用该属性值,也就是说动画播放完了,我们继续保留这个属性;backwards 动画开始前应用第一帧的样式,比如说本来有一个样式,然后有一个动画,动画没开始,这时我们就需要把动画的第一帧应用到当前的这个元素上。除此之外呢,还有一个none 两个都不用也就是动画结束后恢复原有样式以及both 两个都用。

.main { animation-name: round; animation-duration: 5s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1); animation-delay: 3s; animation-direction: alternate; animation-fill-mode: forwards; }

8 play-state - 控制动画运行或暂停

有两个值:paused 暂停和 running 运行。play-state一般应用于JS,应用js来控制css是否运行。

制图网(www.makepic.net),专业的logo免费设计在线生成网站,全自动智能化logo设计,商标设计,logo在线生成!

欢迎使用制图网制作属于您公司自己的logo,不仅专业而且经济实惠,全方位满足您公司品牌化、视觉化的需求。

输入激活码

只需简单一步,使用微信扫码(或长按识别二维码)并在任一小程序首页根据提示获取激活码! chatGPT中文网页版,无需注册,快来体验全网最火爆的人工智能应用!
刻字印章刻章子定刻光敏盖章印订制(淘宝商家)

输入激活码

只需简单一步,使用微信扫码(或长按识别二维码)并在任一小程序首页根据提示获取激活码! chatGPT中文网页版,无需注册,快来体验全网最火爆的人工智能应用!
刻字印章刻章子定刻光敏盖章印订制(淘宝商家)
请使用手机淘宝进行扫码