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用Django+Celery+Redis 监视程序(一)
C盘创建一个目录就叫DjangoDemo,然后开始在该目录下操作. 1.新建Django工程与应用 运行pip install django 安装django 这里我们建一个名为demo的项目和hom ...
- qt中的事件机制
事件 1.QEvent -->类型 -> QKeyEvent QEvent::KeyRelease QEvent::MouseMove -> QMouseEvent 2.事件处理过程 ...
- 11个phpstorm 快捷键介绍
11个phpstorm 快捷键介绍 http://phpstorm.tips/tips/11-toggling-case
- openvpn服务器一键脚本生成客户端文件
#!/bin/bash #获取参数 while getopts "n:" opt; do case $opt in n) client_name=$OPTARG ;; \?) ;; ...
- paping使用来测试联通&网站由于tcp协议导致的无法通信问题超时问题
1. 使用paping来测试连通性 Linux 平台: : wget http://www.updateweb.cn/softwares/paping_1.5.5_x86-64_linux.tar.g ...
- word在页眉中插入页码
编辑页眉时,插入-页码-当前位置-普通数字
- .Net Core和jexus配置HTTPS服务
花了几天时间,看了好多篇博客,终于搞定了网站的HTTPS服务,借此写篇博客,来让有需要的朋友少走弯路. 一.环境介绍 1.Linux下在Docker容器中部署好了一个网站,该网站需要通过外部提供程序访 ...
- CENTOS6.6下zabbix2.4.7搭建
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 安装依赖 安装Perl .apr / apr-util yum -y ...
- vuejs、eggjs全栈式开发设备管理系统
vuejs.eggjs全栈式开发简单设备管理系统 业余时间用eggjs.vuejs开发了一个设备管理系统,通过mqtt协议上传设备数据至web端实时展现,包含设备参数分析.发送设备报警等模块.收获还是 ...
- ARM平台的虚拟化介绍
本篇博文主要介绍虚拟化的基本思想以及在arm平台如何做虚拟化,arm提供的硬件feature等等. 虚拟化技术简介 虚拟化技术 虚拟化是一个概念,单从这个概念的角度来看,只要是用某一种物品去模拟另一种 ...