css3 animate基本属性

Css3animate属性

属性	描述	Css
Animation	所有动画属性的简写属性，除了animation-play-state属性 Animation:name duration timing-function delay iteration-count direction;	3
Animation-name	规定@keyframes动画的名称。 animation-name:keyframename\|none	3
Animation-duration	规定完成一个周期所花费的秒或毫秒。默认是0； Animation-duration:time;	3
Animaion-timing--function	规定动画的速度曲线。默认是ease。	3
Animation-delay	规定动画何时开始。默认是0 Animation-delay:time	3
Animation-iteration-count	规定动画被播放的次数。默认是1. Animation-iteration-count:n\|infinite	3
Animation-direction	规定动画是否在下一周期逆向的播放。默认是normal。 Normal是默认值。动画应该正常播放 Alternate动画应该轮流反向播放	3
Animation-play-state	规定动画是否正在运行或暂停，默认值是”running”。 Animation-play-state:paused\|running； Paused:规定动画已暂停 Running:规定动画正在播放	3

Css3@keyframes规则

语法:

@keyframe animationname{keyframes-selector{css-styles;}}

值	描述
Animationname	必需，定义动画的名称
Keyframes-selector	必需。动画时长的百分比。合法值：0-100% From(与0%相同) To(100%相同)
Css-styles	必需。一个或多个合法的css样式属性

定格动画

值	描述
Animationend	当animation执行完成后js调用的事件
Animationend	Moz内核
webkitanimationEnd	Webkit内核
oaimationEnd	Opera内核
MSAnimationEnd	Ie内核

值	描述
Transitionend	当transition执行完成之后js调用的事件
Transitionenf	Moz内核
webkittransitionEnd	Webkit内核
otransitionEnd	Opera内核
MSTransitionEnd	IE内核

以上是animate的基本属性

转载于:https://www.cnblogs.com/TzSteady/p/7396849.html

css3 animate基本属性相关推荐

css3 animate 和关键帧 @-webkit-keyframes
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
html图片展示动画效果图,CSS3 animate更酷的图片显示效果张鑫旭-鑫空间-鑫生活...
CSS代码: .anim_image { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o ...
animate.css –齐全的CSS3动画库--- 学习笔记
animate.css – 齐全的CSS3动画库学习网站: https://daneden.github.io/animate.css/ http://www.dowebok.com/98.html ...
前端进阶必学必会动画学习之Animate.css的使用与解析：一个强大而酷炫的CSS3动画库Animate.css使用方法教程
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut). ...
CSS3无前缀脚本prefixfree.js与Animatable使用介绍
要求必备知识本文要求基本了解 JAVASCRIPT 和和 CSS3 基本知识. 运行环境桌面端:IE9 +,Opera 10+,火狐3.5 +,Safari 4+和Chrome浏览器;移动端: ...
CSS3无前缀脚本prefixfree.js与Animatable使用
现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS ...
CSS3无前缀脚本prefixfree.js及Animatable介绍
一.引导之言虽然现代浏览器支持CSS3,但是一些过往的版本或是目前有些CSS3属性的应用还是离不开前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要 ...
animate.css（第三方动画使用方法）
animation 语法: animation: name duration timing-function delay iteration-count direction; animation-na ...
animate,wow,Bootstrap,scrollReveal
Animate 1.简介随着HTML5规范的不断完善,围绕着这一生态有很多实用的框架,极大的提高了我们的开发效率,常见的框架代表有:UI层面的有Bootstrap.Yui.JqueryUI.CSS3 ...
web上渐进使用jQuery Mobile中animate相关CSS
一.关于animate.css 在介绍主人公之前,先说说他的亲戚. 有个叫"蛋一灯(Dan Eden)"的人弄了个名叫animate.css的开源项目,实际上就是使用CSS3 an ...

css3 animate基本属性

css3 animate基本属性相关推荐

最新文章

热门文章