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代码来实现,但是效率偏低,而且效果有些偏生硬,不够顺滑. 毕竟用 ...
随机推荐
- NIO下_使用示例
一.分散与聚集 1.分散读取(Scattering Reads):将通道中的数据分散到多个缓冲区中 2.聚集写入(Gathering Writes):将多个缓冲区中的数据聚集到通道中 public v ...
- 备忘录之 —— .bashrc(IC工具篇)
好久没有使用这些IC工具了,装在自己的虚拟机中的Linux系统里面,现在想要卸载掉,想起之前自己辛辛苦苦的折腾这些工具配置,如果直接删除,感觉未免有点对不起自己的劳动成果,或许以后再也用不到了,就当是 ...
- 让linux 服务器网卡物理口不停闪烁
[root@DBSERVER51 ~]# ethtool -p eth0 此时就会看到对应的物理口一个灯在不停的闪烁,对了.这就是我们在系统看到的那个叫eth0的网卡了.就是这么简单.
- PHP系统左侧菜单栏的管理与实现
在日常的开发工作中,面对后台的日益增长的业务,以及后期业务的迭代开发,通常会选择添加菜单栏的形式来扩充业务功能,同样日益增长的后台菜单选项也为我们后期的维护,产生了一定的困难性.为此我总结出自己关于左 ...
- 跟面向对象卯上了，看看ES6的“类”
上回我们说到ES5的面向对象,以及被大家公认的最佳的寄生组合式继承.时代在进步,在ES6中对于面向对象这个大boss理所应当地进行了一次大改,从原先那种比较长的写法转变为"小清新" ...
- python爬取快手视频 多线程下载
就是为了兴趣才搞的这个,ok 废话不多说 直接开始. 环境: python 2.7 + win10 工具:fiddler postman 安卓模拟器 首先,打开fiddler,fiddler作为htt ...
- Asp.Net Core Identity+EFCore + Mysql踩坑记录
搭建基础框架准备试试传说中的Identity,本以为很顺利,结果一路踩了N多坑 遂就把过程记录下来.方便自己以后查看,也希望能帮到遇到同样问题的朋友. 1.首先,引入Identity需要的类库,还有M ...
- PHP实现网页爬虫
抓取某一个网页中的内容,需要对DOM树进行解析,找到指定节点后,再抓取我们需要的内容,过程有点繁琐.LZ总结了几种常用的.易于实现的网页抓取方式,如果熟悉JQuery选择器,这几种框架会相当简单. 一 ...
- C++学习笔记第二天：几个知识点
第一天,囫囵吞枣的把C++的基本概念撸了一遍 有几个地方不太理解,今天有针对性的学习一下 1.namespace 自定义命名空间,主要为了解决类.函数和全局变量的命名冲突问题. 调用某个命名空间里的符 ...
- C++中结构体与类的区别（struct与class的区别）
转载来源:http://blog.sina.com.cn/s/blog_48f587a80100k630.html C++中的struct对C中的struct进行了扩充,它已经不再只是一个包含不同数据 ...