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 ...
随机推荐
- 【日常操作记录】Asp.Net Core 的一些基本操作或属性
用于记录在项目中使用到的方法.属性.操作,持续更新中 静态文件的使用 在项目中静态文件的使用需要在Startup中的Configure方法中增加: //使用静态文件 app.UseStaticFile ...
- System.Environment.CurrentDirectory和Application.StartupPath
System.Environment.CurrentDirectory的含义是获取或设置当前工作路径,而Application.StartupPath是获取程序启动路径,表面上看二者没什么区别,但实际 ...
- UI输入控件
--UI输入控件 -- 输入控件 cc.uii.UIInput.new(table) --[[ 参数 table{ image 输入框图像,可以为图片名或者display.newScale9Sprit ...
- vuex（1.0版本写法）
Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构. 官方文档:http://vuex.vuejs.org/zh-cn/ 2.0和1.0都能在此找到 每一个 Vuex 应用的核心就 ...
- java面向对象---对象初始化
在本地变量中,如果定义了一个变量后没有赋值就使用,那么eclipse就会报错:但是在成员变量中,java是会强制给一个没有初始化的变量一个默认的初始值0, 如果是一个boolean类型的变量,那么默认 ...
- JSF primefaces dataTable paginator 表格分页 问题
当第一次查询返回list列表,分页1,2,3.....这是选择2,当前页面停留在第2页. 当再次查询后,因为使用的ajax,结果更新了,但当前页面依旧是第2页. 可以在jsf页面,datatable的 ...
- 多视图学习利器----CCA（典型相关分析）及MATLAB实现
Hello,我是你们人见人爱花见花开的小花.又和大家见面了,今天我们来聊一聊多视图学习利器------CCA. 一 典型相关分析的基本思想 当我们研究两个变量x和y之间的相关关系的时候,相关系数(相关 ...
- ionic 发布 inoc显示不正确
前两天因为学习的问题,把本地环境给搞崩了,然后重新安装环境之后发现生成的安装包不能使用,然后找了很多原因都不能解决,因为之前发布ios的时候使用命令 ionic resources的时候就可以将图标显 ...
- selenium 页面截图并保存
import java.io.File; import java.io.IOException; import org.apache.commons.io.FileUtils; import org. ...
- Apache Shiro 学习记录2
写完上篇随笔以后(链接).....我也想自己尝试一下写一个Strategy.....Shiro自带了3个Strategy,教程(链接)里作者也给了2个.....我想写个都不一样的策略.....看来看去 ...