CSS3 @keyframes 规则

如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

浏览器支持

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

实例

@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;}
}
/*注:下面的写法将不再写 -webkit- 和 -moz- */

或者用%表示时间段

@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

注意:当您在 @keyframes 中创建动画时,需要把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

  • 规定动画的名称
  • 规定动画的时长

实例

把 "myfirst" 动画捆绑到 div 元素,时长:3 秒:

div{
animation: myfirst 3s;
}

其中animation有6个属性

  • animation-name  规定 @keyframes 动画的名称
  • animation-duration  规定动画完成一个周期所花费的秒或毫秒。默认是 0
  • animation-timing-function  规定动画的速度曲线。默认是 "ease" 。  4个属性:ease、ease-in、ease-out、ease-in-out
  • animation-delay  规定动画何时开始。默认是 0
  • animation-iteration-count  规定动画被播放的次数。默认是 1。   2个属性:n(次数,不填写即为1)和infinite(无限次)
  • animation-direction  规定动画是否在下一周期逆向地播放。默认是 "normal"。   2个属性:normal(正常循环播放,可不填)和alternate(结束后轮流反向播放)

所有属性可以合起来写

div {
animation: myfirst 5s linear 1s infinite alternate;
/*动画名称、动画时间5s、动画速度:匀速、延迟开始时间:1s、动画播放次数:无限次、动画完成后下一周期:轮流反向播放。*/
}

CSS3 动画 animation和@keyframes的更多相关文章

  1. 前端CSS3动画animation用法

    前端CSS3动画animation用法 学习如下动画属性 @keyframes animation-name animation-duration animation-delay animation- ...

  2. CSS3 动画animation

    关键帧 什么是关键帧.一如上面对Flash原理的描述一样,我们知道动画其实由许多静态画面组成,第一个这样的静态画面可以表述为一帧.其中关键帧是在动画过程中体现了物理明显变化的那些帧. 比如之前的例子中 ...

  3. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  4. CSS3动画animation认识,animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  5. CSS3 动画Animation的8大属性

    animation复合属性.检索或设置对象所应用的动画特效. 如果有多个属性值时以","隔开,适用于所有元素,包含伪对象:after和:before 1.animation-nam ...

  6. css3动画animation

    动画:animation   animations这物似乎还是只在webkit,moz核心的浏览器上起作用 <!DOCTYPE html><html lang="en&qu ...

  7. css3动画-animation

    animation驱使一组css style变化到另外一组css style,它可以定义keyframes的集合,指定style的开始和结束状态,它是transition的增强. 配置animatio ...

  8. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  9. css3学习--css3动画详解一(animation属性)

    ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...

随机推荐

  1. 通过express搭建自己的服务器

    前言 为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据.这次我采用express框架去写API接口.所有请求都是通过ajax请求去请求服务器来返回数据.第一次用node写后端,基本就是 ...

  2. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  3. AngularJS 路由精分

    AngularJS 路由机制是由ngRoute模块提供,它允许我们将视图分解成布局和模板视图,根据url变化动态的将模板视图加载到布局中,从而实现单页面应用的页面跳转功能. AngularJS 路由允 ...

  4. hdu 4468 spy 极其精彩的一道kmp灵活运用题

    出的超级好的一道题.至于好在哪里,请思考题目: 题意抽象出来为给定一个字符串r,找出它的一个最短后缀s,使得这个r可以被 s的某前缀+s的某前缀+......+s的某前缀+s本身构造出来. 具体题目描 ...

  5. 【特效】页面滚动到相应位置运行css3动画

    请到我的个人博客网站上浏览此文章,欢迎评论和建议. 文章链接:http://www.xiaoxianworld.com/archives/87 现在css3动画很常见了,实际项目中经常应用,特别是那种 ...

  6. App 监控、推广

    一.监控 酷传  http://www.kuchuan.com/ 应用雷达  http://www.ann9.com/ AppAnnie https://www.appannie.com/cn/ ap ...

  7. Git命令(1)

    windows中文乱码: http://www.cnblogs.com/Gukw/archive/2012/01/16/2323417.html 学习地址 :http://www.liaoxuefen ...

  8. CSS之 float 属性

    特性: float的设计初衷仅仅是文字环绕效果  浮动具有破坏性,会使父容器高度塌陷  清除浮动方法: 1.脚底插入cleart:both 2.父元素BFC(IE8+)/haslayout(IE6/7 ...

  9. 使用acs-engine在Azure中国区部署kubernetes集群详解

    转载请注明出处:http://www.cnblogs.com/wayneiscoming/p/7649642.html 1. acs-engine简介 ACS是微软在2015年12月推出的一项基于容器 ...

  10. 用 eclipse 创建一个简单的 meaven spring springMvc mybatis 项目

    下面是整体步骤: 1: 先创建一个Maven 项目: 选择跳过骨架: 因为要搭建的是 web 项目  所以这个地方选择 war 包; 点击完成 这样就完成 Maven项目的搭建: 接下俩 先把 Mav ...