反向的css动画,动画方向 | animation-direction
动画方向 | animation-direction
animation-directionCSS 属性指示动画是否反向播放,它通常在简写属性animation中设定
/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;
/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;
使用速记属性animation一次性设置所有动画属性通常很方便。
Initial value
normal
Applies to
all elements, ::before and ::after pseudo-elements
Inherited
no
Media
visual
Computed value
as specified
Animation type
discrete
Canonical order
the unique non-ambiguous order defined by the formal grammar
语法
值
normal每个循环内动画向前循环,换言之,每个动画循环结束,动画重置到起点重新开始,这是默认属性。alternate动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向,比如,ease-in 在反向时成为ease-out。计数取决于开始时是奇数迭代还是偶数迭代reverse反向运行动画,每周期结束动画由尾到头运行。alternate-reverse反向交替, 反向开始交替动画第一次运行时是反向的,然后下一次是正向,后面依次循环。决定奇数次或偶数次的计数从1开始。
注:当您在animation-*属性中指定的动画。animation-name属性以不同的方式使用,具体取决于有多少。有关更多信息,请参见设置多个动画属性值...
形式语法
#where
= normal | reverse | alternate | alternate-reverse
示例
有关示例,请参阅CSS动画。
规格
Specification
Status
Comment
CSS AnimationsThe definition of 'animation-direction' in that specification.
Working Draft
Initial definition.
浏览器兼容性
Feature
Chrome
Edge
Firefox (Gecko)
Internet Explorer
Opera
Safari (WebKit)
Basic support
(Yes)-webkit 43.0
(Yes)-webkit (Yes)
5.0 (5.0)-moz 16.0 (16.0)1
10
12-o 12.50
4.0-webkit
reverse
19
(Yes)
16.0 (16.0)
10
(Yes)
(Yes)
alternate-reverse
19
(Yes)
16.0 (16.0)
10
(Yes)
(Yes)
Feature
Android
Android Webview
Edge
Firefox Mobile (Gecko)
IE Phone
Opera Mobile
Safari Mobile
Chrome for Android
Basic support
?
?
(Yes)-webkit (Yes)
5.0 (5.0)-moz 16.0 (16.0)1
?
?
?
(Yes)-webkit 43.0
reverse
No support
?
(Yes)
16.0 (16.0)
?
?
No support
(Yes)-webkit
alternate-reverse
?
?
(Yes)
16.0 (16.0)
?
?
?
(Yes)-webkit
反向的css动画,动画方向 | animation-direction相关推荐
- CSS 动画学习笔记——Animation篇
首先了解一下 Animation 的基本用法,使用其需要给动画指定一个周期持续的时间,以及动画效果的名称.可以看一下demo 注释:这是一个给透明和背景色属性设置的一个动画过渡效果 实现很简单(具体看 ...
- CSS: Animation CSS:动画 Lynda课程中文字幕
CSS: Animation 中文字幕 CSS:动画 中文字幕CSS: Animation CSS动画为将运动引入交互式项目提供了一种全新的方式 这是网页设计师和开发人员的核心技能,也是用户期望从现代 ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- css拉伸动画,CSS3 matrix双板划水、拉伸、打板动画实例animation
matrix 在 CSS3 中用于制作对象的矩阵效果,把处于不同的状态的矩阵连接起来就变成了动画.单用 matrix 制作动画尽管变化形式不多,但组合合理一样可以制作出新颖的动画. 以下就用 matr ...
- 反向的css动画,反向使用CSS动画(通过重置状态?)
小编典典 不,没有办法单独使用CSS重新启动动画.您必须使用JavaScript从元素中删除动画,然后将其重新应用到元素(经过延迟)以重新启动. 以下是[W3C的CSS3动画规范说的(在不同的上下文中 ...
- html css动画自动旋转,基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 实现的代码. html代码: $('.mod_info2__power3').o ...
- css动画帧动画效果,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
- 1.CSS3 教程-> 多列布局 > image模块 > cssTransition 过渡 > CSS Animations 动画 > Transform二维
CSS3 教程 多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维 介绍 CSS3 是层叠样式表(Cascading Style S ...
- 如何在html网页中利用css实现动画效果
animation动画 1.@keyframes 定义关键帧动画 以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 1 ...
最新文章
- JAVA一个项目的路径为_java 得到项目路径
- 一次插拔U盘引发的学案
- 使用Gunicorn Ngnx Supervisor部署Django项目
- 世界上第一位程序员是位美女——AdaLovelace【有图为证】
- erhai系统使用_web
- 避免重蹈欧美“超级电厂”覆辙 瑞星全力保障国内电力行业信息安全
- Spring cloud——Hystrix 原理解析
- git push 提交时显示 Empty reply from server的解决办法
- hive mysql元数据表说明
- oracle诊断日志,oracle日常诊断语句
- 消息称快手拟发行4.159亿股 招股价上限约93港元
- BZOJ 1492 货币兑换Cash
- UnityGI3:光照探针
- 指针数组和数组指针的本质(四十一)
- 深度学习优化方法总结比较(SGD,Adagrad,Adadelta,Adam,Adamax,Nadam)
- java大马后门_一款免杀php大马的解密与去后门 | 学步园
- 学习探究--实信号与复信号
- Games101课程笔记_lecture20_color颜色
- MongoDB副本详解
- 简单数据类型的转换和条件控制语句(if else)的使用
热门文章
- metasploit怎么用? 进阶(msfvenom=payloads+encoders)篇 (゚益゚メ) 渗透测试
- iOS之深入探究动画渲染降帧
- 【深度学习】目标检测算法 YOLO 最耐心细致的讲解
- 魅族 系统更新服务器,Flyme
- 轻快pdf阅读器如何使用
- java 给一个开学日期,计算当天是开学第几周星期几或者开学第几周星期几为哪一天
- 区块链十年一梦:有人辞官归故里,有人星夜来赶考
- ERROR: Could not build wheels for cryptography which use PEP 517 and cannot be installed directly
- 无限火力跳跳机器人_2021LOL无限火力机器人最强出装和天赋介绍
- java设计模式--设配器adapter