在web上制作动画(css3)

今天学css3的动画，在这里记录下使用方法以及一些技巧

定义一个动画

在css3中定义动画的语法为

@keyframes 名称 {}

这是w3c的例子兼容所有浏览器

@keyframes myfirst
       {
       from {background: red;}
       to {background: yellow;}
       }

@-moz-keyframes myfirst /* Firefox */
       {
       from {background: red;}
       to {background: yellow;}
       }

@-webkit-keyframes myfirst /* Safari 和 Chrome */
       {
       from {background: red;}
       to {background: yellow;}
       }

@-o-keyframes myfirst /* Opera */
       {
       from {background: red;}
       to {background: yellow;}
       }

给某样式设置动画只需要添加animation属性就行了

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长

例如

把 "myfirst" 动画捆绑到 div 元素,时长:5 秒
       div {
           animation: myfirst 5s;
           -moz-animation: myfirst 5s;   /* Firefox */
           -webkit-animation: myfirst 5s;   /* Safari 和 Chrome */
           -o-animation: myfirst 5s;   /* Opera */
       }

官方推荐动画使用百分比来设置,有一种帧的概念

css元素

css3动画属性 @keyframes
   @keyframes             规定动画
   animation               规定动画属性的简写属性,除了animation-play-state属性
   animation-name           规定@keyframe动画的名称
   animation-duration       规定动画完成一个周期所花费的秒或毫秒,默认是0
   animation-timing-function   规定动画的速度曲线,默认是ease
       linear       动画从头到尾的速度是相同的
   animation-delay           规定动画何时开始,默认是0
   animation-iteration-count   规定动画被播放的次数,默认是1
       infinite           定义动画无限次播放
   animation-direction       规定动画是否在下一周期逆向的播放,默认是normal
   animation-play-state   规定动画是否正在运行或暂停,默认是running
       running       播放
       paused       暂停
   animation-fill-mode       规定对象动画时间之外的状态

下面是我用到的一些动画

让此元素不停旋转

@keyframes music {
           0% {transform:rotate(0deg);}
           100% {transform:rotate(360deg);}
       }

在web上制作动画(css3)相关推荐

html5 制作风车,[网页设计]html5 requestAnimationFrame制作动画：旋转风车
详细内容请点击在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和anim ...
requestAnimationFrame制作动画：旋转风车
在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方 ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
CSS3制作动画的三个属性
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...
前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
HTML设置页面动画效果有几种,前端制作动画的几种方式（css3，js）
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
css3制作动画色子,css3实现3D色子翻转特效
css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的规律,代码如下: 复制代码代码如下: ...
地图上制作线路的动画_纯干货：动画制作的十二个法则（上）
制作动画的十二个原则,不论是3D动画还是flash还是AE都适用. 首先先找到十二个妹子,演示用. 一:挤压与拉伸通过挤压与拉伸赋予物体或角色弹性,使其更加灵动. 左为使用该原则的例子,右为对比. ...
HTML5七夕情人节表白网页制作【生日蛋糕烟花动画CSS3特效】HTML+CSS+JavaScript html生日快乐祝福网页制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
android制作开场动画,怎样制作视频片头?安卓手机上制作倒计时片头并添加到视频上|开场倒计时视频制作...
注意此教程方案是『安卓手机端教程方案』如果在手机端操作不方便或对眼睛不好也可以用另外电脑端的教程方案操作:10秒倒计时视频[找更多方案] 今天要介绍怎样制作视频片头是在安卓手机上制作一段倒计时片头 ...