Keyframes
被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同时间段样式规则。
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
在一个“@keyframes”中的样式规则可以由多个百分比构成的,如在“0%”到“100%”之间创建更多个百分比,分别给每个百分比中给需要有动画效果的元素加上不同的样式,从而达到一种在不断变化的效果。
经验与技巧:在@keyframes中定义动画名称时,其中0%和100%还可以使用关键词from和to来代表,其中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介绍的更多相关文章
-
CSS篇
一.盒子模型: 标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. CSS盒子 ...
-
十天精通CSS3学习笔记 part4
CSS3中的变形与动画(下) CSS3 Keyframes介绍 Keyframes 被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后 ...
-
css3学习--css3动画详解一(animation属性)
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...
-
css3学习文档
什么是CSS3? CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能. 目前主流浏览器chrome.safari.firefox.opera.甚至360都已经支 ...
-
CSS3知识点整理(三)----变形与动画
一.CSS3中的变形 1)旋转 rotate() rotate()函数通过指定的角度参数使元素相对原点进行旋转. 它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度. 如果这个值为正值,元 ...
-
十天精通CSS3(9)
Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一些不同 ...
-
css3动画详解
一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一 ...
-
第9章 CSS3中的变形与动画(下)
Keyframes介绍 Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以"@keyframes"开头,后面紧跟着是动画名称加上一对花括号" ...
-
CSS3 @keyframes 规则以及animation介绍和各种动画样式说明
一个好网站:http://www.jqhtml.com/ 如需在 CSS3 中创建动画,您需要学习 @keyframes 规则. @keyframes 规则用于创建动画.在 @keyframes 中规 ...
随机推荐
-
MySQL表名和数据库关键字相同解决办法
今天改他们的代码的时候,遇到了MySQL表名和数据库关键字的问题. 由于表名是关键字,导致增删改查都报错. Hibernate: select leave0_.id as id22_, leave0_ ...
-
【GWAS文献】基于GWAS与群体进化分析挖掘大豆相关基因
Resequencing 302 wild and cultivated accessions identifies genes related to domestication and improv ...
-
final修饰的变量是引用不能改变,还是引用的对象不能改变???
对于这个问题,我们不能只记结论,要拿实例说话,参看以下代码: public class Demo { public static void main(String[] args) { final St ...
-
常用linux维护命令
cat /etc/issue 查看linux版本信息
-
System.DateTime.Now的内容
?System.DateTime.Now{2016/10/09 15:19:12} Date: {2016/10/09 0:00:00} dateData: 985948826838121 ...
-
Http和Https有什么区别
以前去面试的时候,好几家公司都会问到这个问题:http和https有什么区别? 最近突然想恶补一些基础,再夯实一下自己实力,毕竟强大的能力才是工资的保证嘛,今天就来简单记录一下htttp和https的 ...
-
算法(第四版)C# 习题题解——1.2
写在前面 整个项目都托管在了 Github 上:https://github.com/ikesnowy/Algorithms-4th-Edition-in-Csharp 这一节内容可能会用到的库文件有 ...
-
【 HDU1081 】 To The Max (最大子矩阵和)
题目链接 Problem - 1081 题意 Given a two-dimensional array of positive and negative integers, a sub-rectan ...
-
Excel 版本对应
(1) 1985年:Excel 1.0 (2) 1993年:Excel 5.0——Office 4.2 (3) 1995年:Excel 7.0(Excel 95)——Office 95 (4) 199 ...
-
[svc]sudo su权限案例
一 控制sudo 允许执行所有命令,排除某几个命令(带参数) lanny ALL=(ALL) NOPASSWD:ALL, !/bin/su - root, !/usr/sbin/visudo 如果需要 ...