Css3关键帧动画
@keyframes设置动画规则，可以理解为一个剧本；
1.name动画的名字必需填写 2.可以使用百分比0%-100%或者from...to...必填内容； 3.需要变化css的样式；必需；
animation所有动画的简写属性排序如下：
animation-name动画的名字 / animation-duration 持续时长 / animation-timing-function规定动画的速度曲线。/
animation-delay动画定时 /animation-iteration-count动画的运动的次数 /animation-direction属性定义是否应该轮流反向播放动画。
animation-timing-function：规定动画的运动速度曲线。
属性有如下几种：linear匀速进行 ease 开始低速逐渐加快结束时候再变慢
ease-in动画以低速开始 ease-out动画以低速结束
ease-in-out动画以低速开始和结束 cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-direction：normal默认属性 顺序播放/alternate轮流反向播放。
animation-iteration-count：n设置次数；infinite无限次循环播放；
animation-play-state：默认running是正常播放 /paused暂停动画 需要结合js代码才能实现
animation-fill-mode：定义动画结束之外的状态：none 不改变默认行为 /forwards当动画完成，保留最后一个属性值
/backwards 定义在animation-delay中这一段时间，应用开始的属性值，在动画开始之前的状态。
both向前和向后填充模式都被应用（意思是以上2种方法同时会被使用。）
下面是个小实例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="file:///C|/Users/xz/Desktop/学习工具/images/Untitled-2.css">
</head>
<body>
<div class="dh">
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
div{
width:200px;
height:400px;
background:rgba(153,102,0,0.8);
animation-name:mydh;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes mydh{
0%{
width:200px;
height:400px;
margin-top:100px;
background-color:#0F3;
}
50%{
width:300px;
height:200px;
background-color:#CC9;
margin-top:250px;
}
100%{
width:200px;
height:400px;
background-color:#C36;
margin-top:300px;}
}
Css3关键帧动画的更多相关文章
- css3关键帧动画实现轮播效果
实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...
- css3 实现动画
CSS3,我们可以创建动画,它可以取代许多网页动画图像,例如下面这个小球动画 使用css3关键帧动画可以轻松实现 请看下面代码 <!DOCTYPE html> <html lang= ...
- CSS3过渡动画&关键帧动画
一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- CSS3之动画相关
CSS3动画相关的属性:transform,transition,animation. 变形Transform 语法: transform: rotate | scale | skew | trans ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3 之动画及兼容性调优
由于CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持. 所以有时候一些简单的动画效果,还只是用js代码来实现,但是效率偏低,而且效果有些偏生硬,不够顺滑. 毕竟用 ...
随机推荐
- python爬站长之家写一个信息搜集器
前言:不知道写什么好,绕来绕去还是写回爬虫这一块. 之前的都爬了一遍.这次爬点好用一点的网站. 0x01: 自行备好requests模块 目标站:http://tool.chinaz.com/ 0x2 ...
- Linux终端下 dstat 监控工具
dstat 是一个可以取代vmstat,iostat,netstat和ifstat这些命令的多功能产品.dstat克服了这些命令的局限并增加了一些另外的功能,增加了监控项,也变得更灵活了.dstat可 ...
- Nginx调用远程php-fpm
在Nginx服务器的情况下,当我们输入 http://localhost:8080/index.php回车的时候 浏览器会将请求发送给Nginx,Nginx会根据我们所配置的以.php结尾的PHP的文 ...
- 2017年 Java 程序员，风光背后的危机
不得不承认,经历过行业的飞速发展期,互联网的整体发展趋于平稳.为什么这么说?为什么要放在 Java 程序员的盘点下说? 的确,对于进可攻前端,后可守后端大本营的 Java 程序员而言,虽然供应逐年上涨 ...
- easyui datagrid 右边框被隐藏
问题前: 如下图: 解决思路: 待文档加载完成后再执行dategrid函数 $(function () { $("#tt").datagrid({ //....... }); }) ...
- 学习资料分享：Python能做什么？
最近一直忙着研究学习Python,很久没更新博客了,整理了一些Python学习资料,和大家分享一下!每天更新一篇~ 一.Python 特点 1.易于学习:Python有相对较少的关键字,结构简单,和一 ...
- nginx虚拟域名的配置以及测试验证
1.保证该机器上安装了nginx 未安装请看:centos/linux下的安装Nginx 2.使用root用户编辑配置文件 vim /usr/local/nginx/conf/nginx.conf 3 ...
- J2ee的13个规范
以下来自于网络. 1.JDBC(java Database Connectivity): JDBC API为访问不同的数据库提供了一种统一的途径,就像ODBC一样,JDBC对开发者屏蔽了一些细节问题, ...
- MysqL错误之_ERROR! MySQL server PID file could not be found!
在配置Mysql主从GTID模式下,启动Mysql服务时出现报错,搜索了一番,找到了一个简单可靠的方法,直接成功.如果遇到相同问题没有解决的童鞋,那就去试一下很多其他方案,如,强制杀掉进程重启,修改其 ...
- 重温基础之-css盒模型
所有html元素都可以看作盒子. css盒模型本质上是一个盒子,封装周围的html元素,它包括:外边距,边框,内边距和实际内容. 默认情况下,一个元素的总宽度计算方式: 总宽度=左外边距+左边框+左内 ...