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

WBOY
Lepaskan: 2022-06-14 15:38:24
asal
2103 orang telah melayarinya

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;
Salin selepas log masuk
  • 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 属性。

Salin selepas log masuk

输出结果:

29.gif

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

Atas ialah kandungan terperinci css3动画执行一次的复合写法是什么. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!