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代码来实现,但是效率偏低,而且效果有些偏生硬,不够顺滑. 毕竟用 ...
随机推荐
- Javascript Sting(字符串)对象
一, 如何计算字符串的长度? 可以通过.length属性来计算 <script type="text/javascript"> var txt="Hello ...
- 爬虫(Spider)，反爬虫(Anti-Spider)，反反爬虫(Anti-Anti-Spider)
爬虫(Spider),反爬虫(Anti-Spider),反反爬虫(Anti-Anti-Spider),这之间的斗争恢宏壮阔... Day 1小莫想要某站上所有的电影,写了标准的爬虫(基于HttpCli ...
- 修改Request 中的数据
拦截器修改参数 今天一位网友开发中遇到一个需求,他需要在Request中修改传递过来的数据.开始的时候他在拦截器中修改,在拦截器中可以获取到从前台request中 传递过来的数据.他写法大致如下:自定 ...
- 异步任务利器Celery(一)介绍
django项目开发中遇到过一些问题,发送请求后服务器要进行一系列耗时非常长的操作,用户要等待很久的时间.可不可以立刻对用户返回响应,然后在后台运行那些操作呢? crontab定时任务很难达到这样的要 ...
- [记]WIndow/Linux 获取本机(全部)IPv4、IPv6、MAC地址方法 (C/C++)
Linux 获取本机IP.MAC地址用法大全 //#include <sys/types.h> #include <ifaddrs.h> #include <sys/io ...
- Hibernate学习（四）get和Load比较
package cn.lonecloud.test.crud; import org.hibernate.HibernateException; import org.hibernate.Sessio ...
- maven The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path错误
对于这个问题的话,请在pom文件中加入 <dependency> <groupId>javax.servlet</groupId> <artifactId&g ...
- puppeteer，新款headless chrome！
puppeteer puppeteer是一种谷歌开发的Headless Chrome,因为puppeteer的出现,业内许多自动化测试库停止维护,比如PhantomJS,Selenium IDE fo ...
- Java集合框架（三）—— List、ArrayList、Vector、Stack
List接口 List集合代表一个有序集合,集合中每一个元素都有其对应的顺序索引.List集合容许使用重复元素,可以通过索引来访问指定位置的集合对象. ArrayList和Vector实现类 Arra ...
- C. Vasya and String
原题链接 C. Vasya and String High school student Vasya got a string of length n as a birthday present. T ...