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

[email protected]规则

语法:

@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的基本属性

时间: 2024-10-05 19:46:38

css3 animate基本属性的相关文章

css3 animate写的超炫3D转换

上一篇中介绍了animate的基本的属性,这一篇讲的则是关于animate以及transforms的使用 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3超炫3维转换</title> <style> *{ padding: 0px; margin: 0px; } .box li{ list

css3动画animate.css的使用

简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西. 在使用animate.css的时候通常都会搭配

animate.css – 齐全的CSS3动画库

animate.css – 齐全的CSS3动画库 演 示 下 载 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能

16款创建CSS3动画的jQuery插件

jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的网站创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果,使得页面向下滚动时网页内容能有一种滑入的动效. 在线演示:http://wow.techbrood.com/fiddle/7 2. CSS3 Animate it 这个插件效果和Smoove类似. 3. WaitMe WaitMe 是用于创建加载CSS3动画的 jQuery 插件. 4. Stroll.j

CSS3无前缀脚本prefixfree.js与Animatable使用

现代浏览器基本支持CSS3,但是一些旧版本的浏览器还是需要添加前缀的.像box-shadow, border-radius这类属性,目前较新版本的浏览器都是不需要前缀的(包括IE9),但是,有些CSS3属性,例如渐变,前缀少不了,每次都需要像盖高楼一样堆叠CSS3代码,如下图: .bg { width:400px; height:177px; margin:70px auto 0; padding-top:73px; position:relative; background-image:-we

JQuery插件之Animate.css和 jquery-aniview

Animate.css 一款强大的预设css3动画库 简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果. 虽然借助 animate.css 能够很方便.快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些

如何方便的控制css3动画开始时间点与持续时间

一般我们在控制css3 animate动画时可以通过简写以减少代码量,只要在需要动画的元素上追加一下类名就可以了,如下例子 /*淡入并向上移动一点位置出现*/ .fadeInUp{ -webkit-animation:fadeInUp 1000ms .8s ease both; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20

动画库animate.css的用法

简介 animate.css是一个来自国外的 CSS3 动画库,它预设了引起弹跳(bounce).摇摆(swing).颤抖(wobble).抖动(shake).闪烁(flash).翻转(flip).旋转(rotate).淡入淡出(fade).滑动(Sliding).光速(lightspeed).缩放变焦(Zoom).翻滚(roll)等多达 70 多种动画效果,借助 animate.css 能够很方便.快速的制作 常见的动画效果.当然animate.css只兼容支持 CSS3 animate 属性

css3新增功能

CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 后代选择器 E F 子选择器 E>F 相邻兄弟选择器 E+F 通用兄弟选择器 E~F 1.3 属性选择器 E[attr] 选择具有att属性的E元素. E[attr="val"] 选择具有att属性且属性值等于val的E元素. E[attr~="val"] 选择具