您的当前位置:首页正文

通过CSSAnimation进行前端动效

2023-11-28 来源:91汽车资讯网
这篇文章主要介绍了关于通过CSS Animation进行前端动效,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

前言

对于简单的补间动画,我们可以通过transition实现。那到底多简单的动画适合用transtion来实现呢?答案就是——我们只需定义动画起始和结束帧的状态的动画。一旦关键帧数大于2时,我们必须转向CSS Animation了。本文为这段时间学习的记录,欢迎拍砖。

简单粗暴介绍CSS Animation 规则和属性定义关键帧动画

语法:

@keyframes <Animation Name> { [<Animation Time Offset> { /* CSS Properties */ }]*}

示例:

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}

注意项:1.<Animation Name>的命名规范

// 命名需要遵循以下规则const rIsInvalid = /^--|^[0-9]+-|^(?:unset|initial|inherit|none)$/ , rIsValid = /^[0-9a-z-_]+$/ifunction isValidAnimationName(animationName: string): boolean{ return !rIsInvalid.test(animationName) && rIsValid(animationName)}

2.<Animation Time Offset>取值0-100%from,等价与0%to,等价与100%。3.<Animation Name>重复怎么办@keyframes CSS规则不支持层叠样式,因此当出现多个同名keyframes,那么仅最后出现的那个有效。

/* 无效 */@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}/* 生效 */@keyframes rotate { from { transform: rotate(90deg); } to { transform: rotate(-360deg); }}

4.<Animation Time Offset>重复怎么办与@keyframes CSS规则一样,标准规定相同的关键帧不产生层叠,仅最后出现的认定为有效。但实际上FireFox14+和Chrome均将关键帧设计为可层叠的。

@keyframes rotate { from { transform: rotate(0deg); } from { background: red; } /* 上述两条time offset实际上等价于 * from { transform: rotate(0deg); background: red; } */ to { transform: rotate(360deg); background: yellow; }}

5.!important导致属性失效一般情况下使用!important会让CSS属性获得最高权重,但在@keyframes下却会导致该CSS属性失效。

@keyframes rotate { from { transform: rotate(90deg); background: red!important; /* background属性无效 */ } to { transform: rotate(-360deg); }}

6.必须提供至少两个关键帧

/* 不会根据缓动函数产生动画效果,而是在动画持续时间的最后瞬间移动过去 */@keyframes move-left{ to { left: 100px; }}
使用动画
<css-selector> { animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction> <animation-fill-mode> <animation-play-state>;}

示例:

.box.rotate { animation: rotate 10s infinite alternate;}
子属性介绍

<animation-name>,指定通过@keyframes定义的补间动画名称。<animation-duration>,动画持续时长,默认为0s。单位为s和ms。<animation-delay>,动画播放延迟,默认为0s。单位为s和ms。<animation-iteration-count>,动画重复播放次数,默认为1,infinite表示无限循环。动画播放总时长为<animation-duration>*<animation-iteration-count><animation-direction>,可选值为normal | reverse | alternate | alternate-reverse,分别表示动画播放顺序是从from到to从to到from从from到to再从to到from从to到from再从from到to。注意:设置alternate|alternate-reverse时,animation-iteration-count必须大于1才能看到效果<animation-fill-mode>,可选值为none | forwards | backwards | both,用于设置动画开始前和结束后是否应用0%100%的样式对元素上。分别表示不应用应用100%的样式延迟播放期间应用0%的样式0%和100%的样式均应用。注意:

  1. 默认情况下(none),动画结束后会恢复动画前的样式;

  2. 设置backwards时,<animation-delay>值大于0才能看到效果。

<animation-play-state>,可选值running | paused,获取和设置播放状态。注意:通过这个属性,我们仅能实现暂停和继续播放的效果,无法实现重播,更别说回放了<animation-timing-function>,用于设置缓动函数类型,值为ease | ease-in | ease-out | ease-in-out | linear | step-start | step-end | steps(<integer>, <flag>) | frames(<integer>) | cubic-bezier(<number>,<number>,<number>,<number>)。其中ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(<number>,<number>,<number>,<number>)的效果均为连续渐变的,而step-start | step-end | steps(<integer>, <flag>) | frames(<integer>)则为突变效果。下面我们深入理解后者吧。

缓动函数-step解疑专题

?step-start实际上等价于steps(10, start),而step-end则等价于steps(10),所以我们只要理解好steps(<integer>, <flag>)即可。

/* 通过设置在一个动画周期内(<animation-duration>)的平均刷新帧数,实现突变动效。具体应用有:游戏精灵行走、打字效果等 * <number_of_steps> - 两个关键帧间的刷新次数 * <direction> - 方向,可选值为 end | start。 * end为默认值,表示动画一结束,动画效果就结束; * start表示动画一开始就马上执行完第一个关键帧的效果。 */steps(<number_of_steps>, <direction>)

从张旭鑫那偷来的解释:start:表示直接开始。也就是时间才开始,就已经执行了一个距离段。于是,动画执行的5个分段点是下面这5个,起始点被忽略,因为时间一开始直接就到了第二个点:1513643914-5b44694cb0dfd_articlex[1].pngend:表示戛然而止。也就是时间一结束,当前距离位移就停止。于是,动画执行的5个分段点是下面这5个,结束点被忽略,因为等要执行结束点的时候已经没时间了:3461688874-5b44694caf26e_articlex[1].png

另外通过将<animation-fill-mode>设置为forwards,那么当<direciton>设置为end时,也会显示(保持)动画最后一个关键帧的样式。

事件
const target = document.getElementById("target")target.addEventListener("animationstart", e => { // 动画开始时触发})target.addEventListener("animationiteration", e => { // 每次重复执行动画时触发 // 当<animation-iteration-count>为1时,不会触发。})target.addEventListener("animationend", e => { // 当动画结束时触发})
搞尽脑汁实现重播效果

到这里我们已经可以通过@keyframes定义和应用CSS Animation了,但我们能否获取对动画效果更多的控制权呢?如开始、暂停、继续、重播。通过<animation-play-state>我们能轻易实现开始、暂停和继续的效果,但重播却没那么容易。

function pause (target: HTMLElement):boolean { const isRunning = target.style.animationPlayState == "running" if (isRunning) { target.style.animationPlayState = "paused" } return isRunning}function play (target: HTMLElement):boolean { const isStop = target.style.animationPlayState == "paused" if (isStop) { target.style.animationPlayState = "running" } return isStop}function replay (target: HTMLElement, animationClassName: string):void { // 先移除动画效果 target.classList.remove(animationName) // requestAnimationFrame的回调函数会在下一次界面渲染前执行 requestAnimationFrame(_ => { // 这时动画的影响还在,所以要等界面渲染完后再重新启用动画效果,才能实现重播 requestAnimationFrame(_ => { target.classList.add(animationName) }) })}
总结

CSS3为我们提供了动画效果,除了提供比Transition更丰富的可控性,比JavaScript更简易的API,还让我们可以使用GPU来加速呢^_^

小编还为您整理了以下内容,可能对您也有帮助:

如何用css制作动画效果?

首先这个问题是一个web开发方面的专业性问题。我们抛开这个专业性,从题目中我们要弄清两个名词,什么是css,什么是动画

css:CascadingStyleSheets(层叠样式表),是一种用来表现HTML或XML等文件样式的计算机语言,在程序员眼中,甚至称不上是语言。

动画:采用逐帧拍摄对象并连续播放而形成运动的影像技术,计算机中的动画也是如此,逐帧播放,每一帧有个元素形态,然后组合起来。

理解了上面的概念,我们再去谈谈用css制作动画,css3之前的版本是不可能用纯css制作动画,需要配合js一起才能制作,通过js控制元素每帧的形态,直到css3这个版本出来,才有纯css3制作一些常见的简单的动画,其中有3个动画属性:变形(transform)、转换(transition)和动画(animation),具体教程网上比较多,内容解说代码也比较多,这里省略,

下面说一下制作动画的步骤:一:自己要清楚自己所要做的动画的一个整体形态,首先就是要建模二:拆分动画形态,就是每帧的形态,或者是一个时长动画的开始和结束形态,中间过程的变化形态。三:通过css动画属性进行编码出这些形态。如果是复杂的,用css配合js编写出来即可。

哪些技术用于创建动画效果的前端开发

用于创建动画效果的前端开发技术主要包括以下几种:


1. **CSS3动画**:CSS3提供了许多用于创建动画效果的属性,如animation、transition、transform等。CSS3动画可以在不依赖任何插件的情况下创建平滑的动画效果。


2. WebGL:WebGL是一种3D绘图协议,允许开发者在网页上创建复杂的3D动画效果。它使用OpenGL ES 2.0或WebGL规范定义的API,允许开发者直接在GPU上渲染图形,从而实现高性能的动画效果。


3. Canvas和SVG:Canvas和SVG是两种用于在网页上绘制图形的技术。它们都支持动画效果,通过使用JavaScript或者相关的API,可以在图形上添加交互和动画。


4. CSS动画合成库:有一些库如GSAP (GreenSock Animation Platform)、anime.js等,它们提供了更高级的动画功能,包括缓动函数、延迟、循环等,可以方便地在网页上创建复杂的动画效果。


5. WebAssembly:WebAssembly是一种用于在浏览器中运行的二进制代码格式,它允许开发者使用高性能的图形和动画库,如Three.js等,创建出高质量的动画效果。


6. 游戏引擎:一些专门为游戏开发的游戏引擎如Phaser、A-Frame等也提供了丰富的动画功能,可以用于创建复杂的动画效果。


这些技术各有优缺点,开发者可以根据项目的需求和预算选择最适合的技术。同时,随着技术的不断发展,新的动画技术也将不断涌现,为前端开发者提供更多的选择。

哪些技术用于创建动画效果的前端开发

用于创建动画效果的前端开发技术主要包括以下几种:


1. **CSS3动画**:CSS3提供了许多用于创建动画效果的属性,如animation、transition、transform等。CSS3动画可以在不依赖任何插件的情况下创建平滑的动画效果。


2. WebGL:WebGL是一种3D绘图协议,允许开发者在网页上创建复杂的3D动画效果。它使用OpenGL ES 2.0或WebGL规范定义的API,允许开发者直接在GPU上渲染图形,从而实现高性能的动画效果。


3. Canvas和SVG:Canvas和SVG是两种用于在网页上绘制图形的技术。它们都支持动画效果,通过使用JavaScript或者相关的API,可以在图形上添加交互和动画。


4. CSS动画合成库:有一些库如GSAP (GreenSock Animation Platform)、anime.js等,它们提供了更高级的动画功能,包括缓动函数、延迟、循环等,可以方便地在网页上创建复杂的动画效果。


5. WebAssembly:WebAssembly是一种用于在浏览器中运行的二进制代码格式,它允许开发者使用高性能的图形和动画库,如Three.js等,创建出高质量的动画效果。


6. 游戏引擎:一些专门为游戏开发的游戏引擎如Phaser、A-Frame等也提供了丰富的动画功能,可以用于创建复杂的动画效果。


这些技术各有优缺点,开发者可以根据项目的需求和预算选择最适合的技术。同时,随着技术的不断发展,新的动画技术也将不断涌现,为前端开发者提供更多的选择。

css动画效果的各种实现方法与区分,使用transition实现一个简单的翻牌效果

感觉自己总是混淆css各种动画效果,所以再这里总结一下

1. transition ,所在元素块样式变动时启动,可用于样式变动时 产生过渡动画效果

| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |

| transition-ration | 规定完成过渡效果需要多少秒或毫秒。 |

| transition-timing-function | 规定速度效果的速度曲线。 |

| transition-delay | 定义过渡效果何时开始。 |

2. tranform :用于平移,旋转,缩放,透视

语法

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-ration 规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

animationname 必需。定义动画的名称。

keyframes-selector 必需。动画时长的百分比。值:0-100%,from(与 0% 相同),to(与 100% 相同)

css-styles 必需。一个或多个合法的 CSS 样式属性。

4.@media :可以根据屏幕大小响应式改变样式

接下来利用transition和transfrom实现一个简单的翻牌效果,先看效果

css3 实现动画效果,怎样使他无限循环动下去?

一、实现CSS3无限循环动画代码示例。

代码如下:

CSS:

@-webkit-keyframes gogogo {

0%{

-webkit-transform: rotate(0deg);

border:5px solid red;

}

50%{

-webkit-transform: rotate(180deg);

background:black;

border:5px solid yellow;

}

100%{

-webkit-transform: rotate(360deg);

background:white;

border:5px solid red;

}

}

.loading{

border:5px solid black;

border-radius:40px;

width: 28px;

height: 188px;

-webkit-animation:gogogo 2s infinite linear ;

margin:100px;

}

扩展资料

实现动画无限循环所需要的CSS属性说明:

1、infinite

在animation后面加上infinite就可以无限循环,另外还可以做反向循环使用animation-direction

2、animation-name

规定需要绑定到选择器的 keyframe 名称。

3、animation-ration

规定完成动画所花费的时间,以秒或毫秒计。

4、animation-timing-function

规定动画的速度曲线。

5、animation-delay

规定在动画开始之前的延迟。

6、animation-iteration-count

规定动画应该播放的次数。

7、animation-direction

规定是否应该轮流反向播放动画。

91汽车资讯网还为您提供以下相关内容希望对您有帮助:

哪些技术用于创建动画效果的前端开发

3. Canvas和SVG:Canvas和SVG是两种用于在网页上绘制图形的技术。它们都支持动画效果,通过使用JavaScript或者相关的API,可以在图形上添加交互和动画。4. CSS动画合成库:有一些库如GSAP (GreenSock Animation Platform)、anime...

css3 实现动画效果,怎样使他无限循环动下去?

-webkit-animation:gogogo 2s infinite linear ;margin:100px;}

css3 实现动画效果,怎样使他无限循环动下去?

鼠标悬停,图标会一直不停旋转。 如果实现图标一直不停旋转,则需要使用animation动画。先制作动画的各个关键帧,然后在图标中运用这一动画。具体操作如下:

css动画效果的各种实现方法与区分,使用transition实现一个简单的翻牌...

1. transition ,所在元素块样式变动时启动,可用于样式变动时 产生过渡动画效果 | transition-property | 规定设置过渡效果的 CSS 属性的名称。 | | transition-duration | 规定完成过渡效果需要多少秒或毫秒。 | ...

5、CSS样式之动画效果

注意: animation同样存在简写,将样式值以空格隔开,不区分先后,两个时间同时出现,第一个为播放时间,第二个为延迟时间。一些css3样式只在部分浏览器生效, 可以通过添加兼容前缀的形式来对部分低版本浏览器兼容 例如: ...

现在网站的动态效果是怎样实现的

用PS做的是效果图,需要前端开发人员编写代码才可以在网站上展示出来。简单来说,在PS里做好之后,需要切图。把图片切割成适合在网站上浏览。切图时需要把文字分离出图片的要处理好。切好图片之后,需要用html结合JavaScript...

CSS3 Animation 返回动效?

top:180px; left:180px; position: relative; } .scale:hover { animation:scale 2s linear; } @keyframes scale { 0% { transform: scale(1); } 25% { transform: scale(1...

jquery有哪些动画效果,如何自定义动画

1 .animate( properties [, duration ] [, easing ] [, complete ] )2 .animate( properties, options ).animate()方法允许在任意的数值的CSS属性上创建动画。2种语法使用,几乎差不多了,唯一必要的属性就是一组CSS...

如何用CSS3做过渡效果(transition)与动画(animation)麻烦告诉我_百度知 ...

} } @-webkit-keyframes mymove /*Safari and Chrome*/ { from {left:0px;} to {left:200px;} }刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且...

如何通过css样式来实现网站logo发光动画效果

添加修改CSS代码如下 :.logo-site,.logo-sites{position:relative;float:left;margin:18px 0 0 10px;width:220px;max-height:50px;overflow:hidden;transition-duration:.5s} .logo-site img,.logo-sites img{width:...

Top