css3动画执行一次的复合写法是什么

WBOY
Freigeben: 2022-06-14 15:38:24
Original
2103 Leute haben es durchsucht

css3中设置动画执行一次的复合写法是“animation:名称 时间 速度 延迟 1 是否反向播放”,其中“1”表示动画播放的次数,也即动画执行的次数;animation是一个简写属性,用于规定元素动画的动作关键帧名称、动画时间、速度曲线、动画延迟、动画次数以及是否反向播放动画。

css3动画执行一次的复合写法是什么

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3动画执行一次的复合写法是什么

在css3中,动画属性名是“animation”,

该属性是一个简写属性,用于规定绑定的keyframe名称、动画时间、速度曲线、动画延迟、动画次数和是否反向播放动画,

语法为:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Nach dem Login kopieren
  • animation-name 指定要绑定到选择器的关键帧的名称

  • animation-duration 动画指定需要多少秒或毫秒完成

  • animation-timing-function 设置动画将如何完成一个周期

  • animation-delay 设置动画在启动前的延迟间隔。

  • animation-iteration-count 定义动画的播放次数。

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

  • animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

  • animation-play-state 指定动画是否正在运行或已暂停。

动画只执行一次的复合写法只需将其中的animation-iteration-count值设置为1即可。

示例如下:

 
  

注意: Internet Explorer 9 及更早 IE 版本浏览器不支持 animation-iteration-count 属性。

Nach dem Login kopieren

输出结果:

29.gif

(学习视频分享:css视频教程html视频教程

Das obige ist der detaillierte Inhalt voncss3动画执行一次的复合写法是什么. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!