CSS动画@-webkit-keyframes
@-webkit-keyframes：以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。
display: inline-block; 行内块元素，不会产生错位
-webkit-animation-timing-function: linear; 线性过度
-webkit-animation-iteration-count: infinite; 设置循环播放次数：无限次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1 {
width: 200px;height: 200px;background-color: #ffc602;
margin-top: 100px;
display: inline-block; }
@-webkit-keyframes mycolor1{
0%{
background-color: #ffc602
}
20%{
background-color: #1363bc;
height:250px
}
40%{
background-color: #cf0fff;
height:300px
}
60%{
background-color: #810977;
height:350px
}
80%{
background-color: #c91f10;
height:400px
}
100%{
background-color: #ffc602;
height:450px
} }
.div1:hover{
-webkit-animation-name: mycolor1;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
.div2{
width: 200px;height: 200px;background-color: #ffc602;
margin-top: 100px;
display: inline-block; }
@-webkit-keyframes mycolor{
0%{
background-color: #ffc602
}
20%{
background-color: #1363bc;
-webkit-transform: translateY(-10px);
height: 210px;
}
40%{
background-color: #cf0fff;
-webkit-transform: translateY(-20px);
height: 220px
}
60%{
background-color: #810977;
-webkit-transform: translateY(-30px);
height: 230px
}
80%{
background-color: #c91f10;
-webkit-transform: translateY(-40px);
height: 240px
}
100%{
background-color: #ffc602;
-webkit-transform: translateY(-50px);
height: 250px
} }
.div2:hover{
-webkit-animation-name: mycolor;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
}
.div3{
height: 40px;width: 40px;background-color: #08446d;
display: inline-block;
}
.div3:hover{ }
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div> </body>
</html>
@keyframes(关键帧)作为CSS3动画的一部分，其该紧跟一个标识符(由开发者自定)，此标识符将在其他CSS代码中引用。在@keyframes和标识符之后，就是一系列的动画规则(就像普通的CSS代码中声明的style规则)了。这一系列动画规则用大括号括起来隔开，然后再嵌在@keyframes之后的大括号里，类似其他@语法规则。
CSS动画@-webkit-keyframes的更多相关文章
- css动画 aniamtion & @keyframes
MDN-animation文档 animation: [name] [duration] [timing-function] [delay] [iteration-cont] [direction] ...
- CSS动画效果
CSS变形效果 Transform translate:平移 translate(x,y) translateX(x) translateY(y)相对于元素原始位置平移. scale:缩放 大于1放大 ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- css动画结束后 js无法修改translated值 .
由于项目的需要,俺要做一些页面的转场动画. 即将是移动端,肯定是首先css动画了. 结果确发现,css动画中,如果设置animation-fill-mode: both;在动画结束后无法个性trans ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- css动画-animation各个属性详解（转）
CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...
- CSS动画简介
现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端. 但是,CSS动画除外,它实在太有用了. 本文介绍CSS动画的两大组成部分:transition和animation.我不打算给出 ...
- CSS动画复习
一.css动画相关的几个属性 属性 含义 理解 transform 一种CSS属性.用于修改CSS视觉格式模型的坐标空间.使用它,元素可以被移动(translate).旋转(rotate).缩放(sc ...
- web前端学习（三）css学习笔记部分（5）-- CSS动画--页面特效、HTML与CSS3简单页面效果实例
CSS动画--页面特效部分内容目前仅仅观看了解内容,记录简单笔记,之后工作了进行内容的补充 7. CSS动画--页面特效 7.1 2D.3D转换 7.1.1 通过CSS3转换,我们能够对元素进行 ...
随机推荐
- 四种常见的 POST 提交数据方式对应的content-type
原文地址:https://www.cnblogs.com/wushifeng/p/6707248.html application/x-www-form-urlencoded 这应该是最常见的 POS ...
- 开发机器上利用vs2013调试远程IIS上的c#程序
当远程IIS上的C#程序出现问题,怎么排错,一般我们通过看日志排查错误的方法,这种方法在程序异常日志都打印出来的情况下是可以解决的,但如果程序日志不详细,或者从日志看不出有用的内容的时候怎么排错? 本 ...
- chromium之lazy_instance
先看看介绍 // The LazyInstance<Type, Traits> class manages a single instance of Type, // which will ...
- DOM节点操作阶段性总结
HTML中能看到的所有东西都是dom树中的一个节点,注意是“所有”,使用childNodes()可以看到,回车(换行)也是一个节点. 从上图可以看到,select中有四个option,但是有9个节点. ...
- iOS 清理Xcode项目中没有使用到的图片资源和类文件
接手到一个旧的项目,但是发现里面有太多的无用资源,包括升级app后,一些无用的图片资源并没有被删掉,导致app在打包成ipa包以后,文件变大.手边这个项目IM要更换成环信的IM,之前的一些旧的SDK, ...
- 【Hive五】Hive函数UDF
Hive函数 系统自带的函数 查看系统自带的函数 查看系统自带的函数 show functions; 显示自带的函数的用法 desc function upper; 详细显示自带的函数的用法 desc ...
- 厦门Uber优步司机奖励政策（12月14日到12月20日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- P1113 杂务
P1113 杂务 题目描述 John的农场在给奶牛挤奶前有很多杂务要完成,每一项杂务都需要一定的时间来完成它.比如:他们要将奶牛集合起来,将他们赶进牛棚,为奶牛清洗乳房以及一些其它工作.尽早将所有杂务 ...
- nio之netty3的应用
1.netty3是nio的封装版本.在使用上面比nio的直接使用更好.nio简单使用都是单线程的方式(比如:一个服务员服务很多客户),但是netty3的方式不一样的是,引入线程池的方式来实现服务的通信 ...
- PHP中URL字符串与关联数组的互相转换
转换PHP数组为查询字符串放到URL中 $data = array( 'apikey'=>'xg6tr7k', 'user'=>'abcd', 'email'=>'root@exam ...