【CSS3】Keyframes介绍
2016-02-24 21:50
387 查看
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; }
相关文章推荐
- CSS Sprite(CSS贴图)
- css3box-flex属性
- 【CSS3】动画--过渡延迟时间 transition-delay
- 【CSS3】动画--过渡函数 transition-timing-function
- 【CSS3】动画--过渡所需时间 transition-duration
- 【CSS3】动画--过渡属性 transition-property
- 【CSS3】变形--原点 transform-origin
- 【CSS3】matrix
- 对 clear:both 这个样式的一些理解
- HTML CSS 特殊字符表
- Css弹出菜单样式
- 纯css实现垂直导航栏
- css 浮动方式实现水平导航栏
- CSS浏览器兼容问题总结
- CSS未知宽高元素水平垂直居中
- CSS常见问题及兼容性
- Html+css实现纯文字和带图标的按钮
- CSS3:概述
- CSS——对列表应用样式和创建导航栏
- 创建Material样式卡片风格注意事项