3D动画(CSS3)-animation

3D动画(CSS3)-animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果；
通过CSS3，我们能够创建动画，这可以在许多页面中取代
动画图片、Flash动画以及JavaScript。
第一种叫过渡（transition）动画，就是从初始状态过渡
到结束状态这个过程中所产生的动画。所谓的状态就是指
大小、位置、颜色、变形(transform)等这些属性。CCS过
渡只能定义首和尾这两个状态，所以是最简单的一种动画
。
第二种叫做关键帧（keyframes）动画。不同于第一种的
过渡动画只能定义首尾两个状态，关键帧动画可以定义多
个状态，或者用关键帧来说的话，过渡动画只能定义第一
帧和最后一帧这两个关键帧，而关键帧动画则可以定义任
意多的关键帧，因而能实现更复杂的动画效果。

通过@keyframes规则，您能够创建动画。
创建动画的原理是，将一套CCS样式逐渐变化为另一套样
式。在动画过程中，您能够多次改变这套CSS样式。
以百分比来规定改变发生的时间，或者通过关键词“from
”和"to"，等价于0%和100%.0%是动画的开始时间，100%
动画的结束时间。为了获得最佳的浏览器支持，你应该始
终定义0%和100%选择器。、
当在@keyframes中创建动画时，请把它捆绑到某个选择器
，否则不会产生动画效果。
通过规定至少以下两项CSS3动画属性，即可将动画绑定到
选择器；规定动画的名称；规定动画的时长。

语法：
@keyframes animationname
{
keyframes-selector{css-styles;}
}
说明：
animationname:声明动画的名称；
keyframes-selector:用来划分动画的时长，可以使用百
分比形式，也可以使用"from"和"to"的形式。
“from”和“to”的形式等价于0%与100%。
建议始终使用百分比形式。

语法：
animation-timing-function:value;
说明：
animation-timing-function规定动画的速度曲线；
linear:动画从头到尾的速度是相同的。
ease:默认。动画以低速开始，然后加快，在结束前变慢
ease-in:动画以低速开始。
ease-out:动画以低速结束。
ease-in-out:动画以低速开始和结束。
cubic-bezier(n,n,n,n):在cubic-bezier函数填值，可能
的值是从0到1的数值。

语法：
animation-iteration-count:n|infinite;
说明：
animation-iteration-count属性定义动画的播放次数。
n:定义动画播放次数的数值。
infinite:规定动画应该无限次播放。

语法：
animation-play-state:paused|running;
说明：
animation-play-state属性规定动画正在运行还是暂停。
注释：可以在JavaScript中使用该属性，这样就能在播放
过程中暂停动画。
paused:规定动画已经暂停。
running:规定动画正在播放。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div {width: 50px;height: 50px;background-color: green;animation: anim-test 4s;}@keyframes anim-test {0% {transform: translate3d(0,0,0);  }25% {transform: translate3d(200px,0,0);}50% {transform: translate3d(200px,200px,0);    }75% {transform: translate3d(0px,200px,0);  }100% {transform: translate3d(0,0,0);}}div:hover {animation-play-state: paused; /*鼠标经过暂停动画*/}</style>
</head>
<body><div></div>
</body>
</html>

效果：

3D动画(CSS3)-animation相关推荐

动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果. 语法格式: animation:动画名称动画时间运动曲线何时开始播放次数(无线播放 ...
HTML5 和 CSS3 提高篇下 2D转换 transform（移动、旋转、缩放、中心点、综合写法）；动画（animation）；3D转换；浏览器私有前缀；背景色线性渐变
------ 2D 转换(transform)移动.旋转.缩放.中心点 ------- 转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.缩放等效果转换(tran ...
css3-13 css3的3D动画如何实现
css3-13 css3的3D动画如何实现一.总结一句话总结:这里是transform+setInterval实现.transform属性里面的rotate属性值变成rotateX或rotateY ...
浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位读者大家好,我是一只小菜鸟.目前正在学习web前端方面的相关知识.,这也是小菜鸟第一次写博客.写的有哪里不对的地方欢迎各位指正. 本篇文章内容就是利用简单的HTML布局再加上CSS3的3D转换和动 ...
html5 特效框架,带37种3D动画特效的跨浏览器CSS3动画框架
AllAnimation.css是一款带37种3D动画特效的跨浏览器CSS3动画框架.它可以轻松的制作出各种CSS3 3D动画效果,可以在移动手机上使用.并且使用极其简单,使用时只需要添加相应的cla ...
CSS3新增属性——过渡和动画（2D属性，3D动画）
目录 CSS3 一.过渡 1. 属性 2. 花费时间 3. 运动曲线 4. 何时开始二.2D属性 2. translate(移动) 2. rotate(旋转) 3. scale(缩放) 4. tr ...
CSS3 3D动画（一）
CSS3 3D动画知识点详解这篇文章的主要内容是关于css3关于新增3d部分的一个解析,那么下一篇内容我们将会进行一个3D相册的一个练习. 由于CSS3的新增还有很多浏览器的不支持,所以我们简单说一 ...
8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画如 ...
1分钟深入了解CSS3的动画属性animation
拖好久的animation-温馨提示,先看效果,代码附在讲解后上篇说到@keyframe可以定义动画,animation就是将@keyframe所定义好的动画添加在元素身上. animation可以 ...
html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...

3D动画(CSS3)-animation

3D动画(CSS3)-animation相关推荐

最新文章

热门文章