CSS3 animation(动画)属性详解
CSS3animation(动画)属性
animation-none :指定有没有动画(可用于覆盖从从级联的动画)
animation-duration属性定义动画完成一个周期需要多少秒或毫秒
- time:指定动画播放完成花费的时间。默认值为 0, 意味着没有动画效果
animation-timing-function:使用的数学函数,称为三次贝塞尔曲线、速度曲线。使用此函数,你可以使用自己的值,或使用预先定义的值之一
- linear:动画从头到尾的速度是相同的
- ease:默认。动画从低开始,然后加快,在结束之前变慢。
- ease-in:动画以低速开始
- ease-out:动画以低速结束
- ease-in-out:动画以低速开始和结束
- cubic-bezier(n,n,n,n) 在cubic-bezier函数中自己的值。可能的值是从 0 到 1 的数值
animation-delay属性:定义动画什么时候开始。
- time:可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0
单位可以说秒(s)或毫秒(ms)
animation-iteration-count属性:定义动画应该播放多少次
- infinite:指动画应该播放无限次(永远)
animation-direction属性:定义是否循环交替反向播放动画
- normal:默认值。动画正常播放
- reverse:动画反向播放
- alternate:动画在奇数次(1、2、5…)正向播放,在偶数次(2、4、6…)反向播放
- alternate-reverse:动画在奇数次(1、3、5…)反向播放,在偶数次(2、4、6…)正向播放
animation-fill-mode 属性:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
默认情况下,CSS 动画在第一个关键帧播放完之前不会影响元素,在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
- none 默认值。:动画在动画执行之前和之后不会应用任何样式到目标元素。
- forwards:在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值
- backwards :动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 “normal” 或 “alternate” 时)或 to 关键帧中的值(当 animation-direction 为 “reverse” 或 “alternate-reverse” 时)。
- both 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。
animation-play-state:指定动画是否正在运行或已暂停。
- paused 指定暂停动画
- running 指定正在运行的动画
initial:设置属性为其默认值。
- initial 关键字用于设置 CSS 属性为它的默认值
- initial 关键字可用于任何 HTML 元素上的任何 CSS 属性。
inherit :从父元素继承属性
- inherit 关键字指定一个属性应从父元素继承它的值。
- inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性。
CSS3 animation(动画)属性详解相关推荐
- css动画-animation各个属性详解(转)
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括: ...
- CSS过渡属性、动画属性详解
第十四章:过渡属性和动画属性 1. transition过渡效果属性 1.1 transition属性的分解写法 1.2 transition属性的复合写法 1.3 多个属性,分开设置 1.4 注意 ...
- css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
- android编程xml动画,Android中xml设置Animation动画效果详解
在Android中,Animation动画效果的实现可以通过两种方式进行实现,一种是tweened animation渐变动画,另一种是frame by frame animation画面转换动画. ...
- android 属性动画伸缩,Android动画开发——Animation动画效果详解
在Android中,分别可以在xml中定义Animation,也可以在程序代码中定义. 动画类型Android的animation由四种类型组成 XML中alpha渐变透明度动画效果 scale渐变尺 ...
- css动画-animation各个属性详解(通俗易懂)
https://blog.csdn.net/chritina/article/details/99623017
- css3中transition属性详解
transform呈现的是一种变形结果,而Transation呈现的是一种过渡,通俗点说就是一种动画转换过程,如渐显.渐弱.动画快慢等.transition和transform是两种不同的动画模型. ...
- CSS3:overflow属性详解
1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...
- html中content属性,CSS3的content属性详解
CSS中主要的伪元素有四个:before/after/first-letter/first-line,在before/after伪元素选择器中,有一个content属性,能够实现页面中的内容插入. 插 ...
- HTML+CSS教程(十)css3(3D属性详解及动画)
一.3D 转换 1.左手坐标系 :伸出左手,让拇指和食指成"L"形,大拇指向右,食指向上,中指指向前方.这样我们就建立了一个左手坐标系,拇指,食指和中指分别代表X.Y.Z 轴的正方 ...
最新文章
- 面向对象【day08】:类的特殊成员(一)
- 中秋之晚开始 编程语言学习之路
- 在 Linux 中安装 jdk 和 Tomcat 中遇到的命令
- IntelliJ idea 中使用Git
- [渝粤教育] 西南科技大学 电器设备及维修 在线考试复习资料
- 【OpenCV】imread读取数据为空
- python公共变量_Python中的公共变量
- 从零开始学keras之神经网络的数学表示
- 关闭tcp服务器_2020年2月起,不支持TCP和UDP协议的DNS服务器将被强制关闭
- android按任意建关闭对话框,Android: 创建一个AlertDialog对话框,必须按确定或取消按钮才能关闭对话框,禁止按[返回键]或[搜索键]关闭...
- 敏捷团队中有效沟通的5种模式
- mysql trigger 设置错误ERROR1419
- 你看这雪花如此的美丽
- Python筛选某列满足条件的值(isin用法)
- 新书预告:Xilix FPGA数字信号处理设计——基础版
- 微信个人订阅号简单实现在线收款
- Android蓝牙调试助手
- 【区块链实战】什么是 P2P 网络,区块链和 P2P 网络有什么关系
- 机器学习 常见面试题 总结
- (转载)机器学习方法的PPT