animation动画效果

梦里梦外; 2022-03-18 08:56 365阅读 0赞

**animation属性**

开发工具与关键技术：DW、animation动画效果
    作者：黄桂康
    撰写时间：2019.02.20

animation属性是所有动画属性的简写，它是css3动画属性，与\*\*\*@keyframes\*\*\*规则相关。而本篇是实现它动画效果。  
动画过渡：先建好一个宽高的盒子，如下截图：（特别注意是它本来的背景颜色）  
![在这里插入图片描述][20190220131233830.png]  
![在这里插入图片描述][20190220131238286.png]  
而给它加动画效果，就要先定它动画效果的样式，在@keyframes规则里定义，用百分比定义它的顺序，从0%开始到100%结束，它没一段时间的背景颜色都不一的，还有特别注意@keyframes规则后面要给它动画效果的名称，  
![在这里插入图片描述][2019022013124824.png]  
然后就在它的盒子样式里定义animation属性，  
![在这里插入图片描述][2019022013125497.png]  
后面绑定盒子的名称，2秒时间执行，循环，无次数。  
它绑定盒子的名称一定要和@keyframes规则的一样，否则它的动画效果也是实现不出的。  
而下截图就是它成功实现动画效果的第0%的效果。  
![在这里插入图片描述][20190220131259970.png]

[20190220131233830.png]: /images/20220318/df9f4f6442194b7b9aaa32d0be60f97b.png
[20190220131238286.png]: /images/20220318/52767095fe8e4a23be1cd8ad83c8641e.png
[2019022013124824.png]: /images/20220318/6515fa2f4c9e4aedaedc5b74af44b116.png
[2019022013125497.png]: /images/20220318/bc642db1bf10491a943777d632c4362b.png
[20190220131259970.png]: /images/20220318/4d85d30a34bc4ffab2b6f2a61a641327.png

发表评论取消回复

表情：

评论列表（有 0 条评论，365人围观）

还没有评论，来说两句吧...

相关阅读

相关 animation动画

一、集成方法：分两步： 1、首先使用animation 注册动画，如： .mydiv{ -webkit-animation:mymove 5s inf

柔情只为你懂/ 2023年01月07日 02:30/ 0 赞/ 321 阅读

相关 transform、transition、animation动画效果

transform(变形) transition(过渡) animation(动画) 一、transform：直接改变大小和位置，显示改变的结

爱被打了一巴掌/ 2022年12月25日 14:55/ 0 赞/ 178 阅读

相关 Animation用法_animation动画效果

动画类型 Android的animation由四种类型组成 XML中 <table> <tbody> <tr> <td><spa

偏执的太偏执、/ 2022年08月07日 15:59/ 0 赞/ 293 阅读

相关 Core Animation之多种动画效果

1、把图片移到右下角变小透明使用CAAnimationGroup叠加动画效果，就是下面按钮《把图片移到右下角变小透明》描述的效果： ![1361630869

曾经终败给现在/ 2022年08月07日 05:54/ 0 赞/ 246 阅读

相关 Android Tween Animation动画效果详解

Android动画分类： 1.补间动画 Tween Animation 2.逐帧动画 Frame Animation 3. 属性动画 Property Animati

╰+哭是因爲堅強的太久メ/ 2022年07月15日 07:40/ 0 赞/ 286 阅读

相关 jQquery :animated 给没有动画效果的元素添加动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

￡神魔★判官ぃ/ 2022年07月13日 10:40/ 0 赞/ 243 阅读

相关 Android Animation动画效果

Android动画开发——Animation动画效果 Android开发, 动画效果动画类型 Android的animation由四种类型组成 XML中 al

ゝ一纸荒年。/ 2022年06月18日 05:52/ 0 赞/ 304 阅读

相关 animation动画效果

animation属性开发工具与关键技术：DW、animation动画效果作者：黄桂康撰写时间：2019.02.20 animation属性是

梦里梦外;/ 2022年03月18日 08:56/ 0 赞/ 366 阅读

相关 CSS animation动画:实现台球运动效果

CSS animation动画:实现台球运动效果在学习animation动画的时候，我就得这个特别有意思，以后还想制作其他的超酷的效果，以前觉得弄特效的特别帅，感觉现在

待我称王封你为后i/ 2022年03月08日 06:51/ 0 赞/ 342 阅读

相关 jQuery效果—animate动画

开发工具与关键技术：Visual Studio 2015 — animate 作者：廖亚星撰写时间：2019年4 月19 日 jQuery animate()方法允

待我称王封你为后i/ 2022年02月13日 13:45/ 0 赞/ 387 阅读