css keyframes动画属性设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css-keyframes</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div><span></span></div>
</body>
</html>
@-webkit-keyframes move{ /*定义名为move的动画函数 目前chrome对其支持较好 所以加-webkit-前缀*/
0%{ /*时间达到0%时坐标位置为（0,0）*/
transform:translate(0px,0px);/*应用该动画的标签位置为（0,0）*/
}
20%{
transform:translate(100px,80px);
}
50%{
transform:translate(200px,0px);
}
100%{
transform:translate(400px,80px);
}
}
div {
width: 300px;
height: 100px;
background: blue;
border:1px solid red;
margin: 20px 100px;
}
span{
display:inline-block;
width:20px;
height:20px;
border-radius:10px;
background:yellow;
-webkit-animation-name:move;/*调用move动画*/
-webkit-animation-duration:10s;/*move动画从0%到100%的用时，单位为s*/
-webkit-animation-timing-function:ease;/*表示动画播放方式 ease（速度由快到慢）linear（恒定速度）ease-in(加速变化
) ease-out(减速变化) ease-in-out(先加速在减速)*/
-webkit-animation-direction:normal;/*表示动画播放方向 normal（默认从0%到100%） alternate(偶数次从0%到100%，基数
次100%到0%)*/
-webkit-animation-delay:2s;/*动画延时2秒播放*/
-webkit-animation-iteration-count:infinite;/*动画播放的次数 infinite表示无限次*/
-webkit-animation-play-state:running;/*播放还是paused*/
-webkit-animation-fill-mode:none;/*定义动画开始之前和结束之后发生的操作 none（动画结束时返回第一帧） forwards(动
画结束后显示最后一帧) backwards（元素应用动画样式时迅速应用动画的第一帧） both（元素动画同时具有forwards和
backwards效果）*/
}
css keyframes动画属性设置的更多相关文章
- UIView转场动画属性设置
常规动画属性设置(可以同时选择多个进行设置) UIViewAnimationOptionLayoutSubviews:动画过程中保证子视图跟随运动. UIViewAnimationOptionAllo ...
- css动画属性--轮播图效果
通过css的动画属性实现轮播图的显示效果 代码如下: 主体部分: <div id="move"> <ul> <li><img src=&q ...
- CSS波纹动画
波纹动画 在此运用到css的动画属性,以及背景等相关属性. 值得一说的是下面代码中一直写到的这样一行代码:filter: alpha(opacity=0~100) ,这是考虑到浏览器兼容的问题. IE ...
- !!!css如何让img图片居中？css的display属性实现图片居中（代码实例）
在我们开发前端页面的时候,为了让页面效果美观,会让图片呈现居中效果.那么css怎么让img图片居中显示呢?本篇文章给大家带来css如何让img图片居中?css的display属性实现图片居中(代码实例 ...
- 容易忘记的css属性和动画属性
动画属性 @keyframes 关键帧 --> animation 活泼 (配合使用) transform 变换 --> transition 过渡 (配合使用) 1.animation ...
- css中animation和@keyframes 动画
Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...
- CSS选择器，属性前缀，长度单位，变形效果，过渡效果，动画效果
CSS3选择器 ·*通配选择器 ·E标签选择器 ·E#id ID选择器 ·E.class类选择器 ·E F包含选择器,后代选择器 ·E>F子包含选择器 ·E+F相邻兄弟选择器 ·E[foo]属性 ...
- CSS动画属性性能详细介绍
CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,这也是为什么我们推荐 ...
- css @keyframes属性 语法
css @keyframes属性 语法 @keyframes是什么?直线电机生产厂家 @keyframes是CSS的一种规则,可以用来定义CSS动画的一个周期的行为,创建简单的动画. 作用:通过 @k ...
随机推荐
- 基于python的selenium自动化测试环境安装
1. Python2安装 官方网站:https://www.python.org/downloads/ (python3或新版本已经默认集成了pip包和path,安装的时候打勾就行,可以直接跳过下面第 ...
- Ajax操作如何实现跨域请求 （JSONP和CORS实现Ajax跨域的原理）
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- [bigdata] flume file channel CPU消耗比 memory channel高的原因
https://www.quora.com/Why-does-flume-take-more-resource-CPU-when-file-channel-is-used-compared-to-wh ...
- bzoj 4610 Ceiling Functi
bzoj 4610 Ceiling Functi Description bzoj上的描述有问题 给出\(n\)个长度为\(k\)的数列,将每个数列构成一个二叉搜索树,问有多少颗形态不同的树. Inp ...
- AnjularJS系列1 —— 样式相关的指令
最近,开始学习AngularJS. 开始记录学习AngularJS的过程,从一些很简单的知识点开始. 习惯先从实际应用的指令开始,再从应用中去体会AngularJS的优缺点.使用的场景等. 之前一直希 ...
- ionic 获取手机所在位置
之前项目中需要使用到定位功能,前边的文章提到的坐标位置是有问题的,是国际坐标,国内的环境使用google地图会出现问题,所以需要使用国内的地图进行坐标解析,因为国内和国外的坐标体系不一致,需要通过转换 ...
- thinkphp添加数据
<?php namespace Admin\Controller; use Think\Controller; class MainController extends Controller { ...
- 大神php摘录
1. $rs = M('order')->where('id='.$res['id'])->save($order); )){ M('member')->where('id='.$m ...
- Java多线程 2 线程的生命周期和状态控制
一.线程的生命周期 线程状态转换图: 1.新建状态 用new关键字和Thread类或其子类建立一个线程对象后,该线程对象就处于新生状态.处于新生状态的线程有自己的内存空间,通过调用start方法进入就 ...
- excel工具类
excel工具类 import com.iport.framework.util.ValidateUtil; import org.apache.commons.lang3.StringUtils; ...