Keyframes被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。

@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}

在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。

经验与技巧:在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词fromto来代表,其中0%对应的是from,100%对应的是to。

浏览器的支持情况:

Chrome 和 Safari 需要前缀 -webkit-Foxfire 需要前缀 -moz-

案例演示

通过“@keyframes”声明一个名叫“wobble”的动画,从“0%”开始到“100%”结束,同时还经历了一个“40%”和“60%”两个过程。“wobble”动画在“0%”时元素定位到left为100px,背景色为green,然后在“40%”时元素过渡到left为150px,背景色为orange,接着在“60%”时元素过渡到left为75px,背景色为blue,最后“100%”时结束动画,元素又回到起点left为100px处,背景色变为red。

HTML:

<div>鼠标放到我身上</div>

CSS:

@keyframes wobble {
0% {
margin-left: 100px;
background:green;
}
40% {
margin-left:150px;
background:orange;
}
60% {
margin-left: 75px;
background: blue;
}
100% {
margin-left: 100px;
background: red;
}
}
div {
width: 100px;
height: 100px;
background:red;
color: #fff;
}
div:hover{
animation: wobble 5s ease .1s;
}

Keyframes介绍的更多相关文章

  1. CSS篇

    一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. CSS盒子 ...

  2. 十天精通CSS3学习笔记 part4

    CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...

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

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

  4. css3学习文档

    什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...

  5. CSS3知识点整理(三)----变形与动画

    一.CSS3中的变形 1)旋转 rotate() rotate()函数通过指定的角度参数使元素相对原点进行旋转. 它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. 如果这个值为正值,元 ...

  6. 十天精通CSS3(9)

    Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同 ...

  7. css3动画详解

    一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一 ...

  8. 第9章 CSS3中的变形与动画(下)

    Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号" ...

  9. CSS3 @keyframes 规则以及animation介绍和各种动画样式说明

    一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...

随机推荐

  1. 在serviceImpl里使用自身的方法

    @Service("tbLeaveRegisterService")@Transactionalpublic class TbLeaveRegisterServiceImpl ex ...

  2. 低功耗蓝牙4.0BLE编程-nrf51822开发(6)-Battery Service

    Battery Service是有关电池特性方面的服务,如果需要它,在初始化时将它加入到蓝牙协议栈. 如果通过ble_bas_battery_level_update(),电池电量将会通知,Batte ...

  3. Visual Studio 2010扩展让JS与CSS实现折叠

    在Visaul Studio 2010中写js或css代码,缺少像写C#代码时的那种折叠功能,当代码比较多时,就很不方便. 今天发现,已经有VS2010扩展支持这个功能,它就是——JSEnhancem ...

  4. 20145211 《Java程序设计》第2周学习总结——桃花依旧笑春风

    教材学习内容总结 基本类型 整数 short 2字节,int 4字节,long 8字节 字节 byte 1字节 浮点数 float 4字节,double 8字节 字符 char 2字节(包括字母.汉字 ...

  5. httpd.conf

    修改配置文件-时会弹出一个文本式的文件 1.搜索:#LoadModule rewrite_module modules/mod_rewrite.so,去掉前面的# 2.全部替换AllowOverrid ...

  6. Gym 101102A Coins -- 2016 ACM Amman Collegiate Programming Contest(01背包变形)

    A - Coins Time Limit:3000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Descript ...

  7. oracle 变量声明 初始化 赋值

    DECLARE sname VARCHAR2(20); BEGIN sname:='xxx'; sname:=sname||' and tom'; dbms_output.put_line(sname ...

  8. H5 -- 本地存储计数器的值 和前端校验用户

    1. 存储计数器的值 <!DOCTYPE html> <html> <head lang="en"> <meta charset=&quo ...

  9. Java日期时间处理常用方法

    虽然是老生常谈,但整理出来还是有点用. 1.由字符串时间得到Date类型时间 // 由字符串时间得到Date类型时间 public static Date getDateFrom(String str ...

  10. TCP定时器

    http://network.51cto.com/art/201412/459352.htm TCP 是提供可靠的传输层,它使用的方法之一就是确认从另一端收到的数据.但是数据和确认都可能会丢失.TCP ...