transform animation transition css3动画
- transform
定义
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
值
应用
如果transform与transition联合起来用，就能实现绚丽的动画效果，for example~但是如果直接应用在某个元素上，
transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
height: 100px;
width: 100px;
background-color: red;
margin-top: 100px;
margin-left: 200px;
border-radius: 100%;
}
div:hover{
transform: rotate(50deg);
transition:1s;
}
</style>
</head>
<body>
<div>我是一个圆</div>
</body>
</html>
- animation
定义
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name 规定需要绑定到选择器的 keyframe 名称
- animation-duration 规定完成动画所花费的时间，以秒或毫秒计
- animation-timing-function 规定动画的速度曲线。（linear、ease、ease-in、ease-out、ease-in-out、step-start、
step-end、steps(<number>[, [ start | end ] ])）
- animation-delay 规定在动画开始之前的延迟。
- animation-iteration-count 规定动画应该播放的次数。
- animation-direction 规定是否应该轮流反向播放动画。
.slowWalk {
/*规定 @keyframes 动画的名称。*/
-webkit-animation-name: person-slow;
/*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
-webkit-animation-duration: 950ms;
/*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
-webkit-animation-iteration-count: infinite;
/*动画切换的方式是一帧一帧的改变*/
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
} /* 普通慢走 */ @-webkit-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
} @-moz-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
- transition
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。（linear、ease、ease-in、ease-out...）
- transition-delay 定义过渡效果何时开始。
- animation暂停动画和transition暂停
.pauseWalk {
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
}
但是如果要停止transition运动的话，强制改变目标过渡值的处理
var left = $boy.css('left');
// 强制做了一个改变目标left的处理
// 动画是要运行10秒,所以此时动画还是没有结束的
$boy.css('left',left);
// 增加暂停的样式
$boy.addClass('pauseWalk');
但是这样是有问题的，下一次的启动必须等上一次动画的时间结束
transform animation transition css3动画的更多相关文章
- jQuery Animation实现CSS3动画
jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:3 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3中和动画有关的属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform. transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为 ...
- css3实践之图片轮播（Transform，Transition和Animation）
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
- 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效
上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- CSS动画transform、transition和animation的区别
CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...
随机推荐
- 个人电脑配置FTP服务器，四张图搞定。项目需要，并自己写了个客户端实现下载和上传的功能！
测试结果:
- error opening trace file: No such file or directory (2) ,can't load transform_config.xml
出现这个错误:error opening trace file: No such file or directory (2) ,can't load transform_config.xml 是因为没 ...
- 启动mysql出现了error the server quit without updating pid file (/var/lib/mysql/localhost.localdomain.pid)
原来是我的mysql日志太多,所以去/data/log/mysql目录(这个目录是从/etc/my.cnf中的log-error确定的)下删除了 rm -rf mysql_binary_log.*的日 ...
- C Golden gun的巧克力
Time Limit:1000MS Memory Limit:65535K 题型: 编程题 语言: 无限制 描述 众所周知,13级有尊大神Golden gun,人称根叔,简称金枪!众立志进校队的 ...
- 最短路(Bellman_Ford) POJ 3259 Wormholes
题目传送门 /* 题意:一张有双方向连通和单方向连通的图,单方向的是负权值,问是否能回到过去(权值和为负) Bellman_Ford:循环n-1次松弛操作,再判断是否存在负权回路(因为如果有会一直减下 ...
- iOS @try
try{ //1:抛出异常的代码 //2:代码 }catch(){ //3:代码 //4:抛出异常 }finally{ //5:代码 } //6:代码要明确的一点是:不管try是否抛出异常,final ...
- 【c++】标准模板库STL入门简介与常见用法
一.STL简介 1.什么是STL STL(Standard Template Library)标准模板库,主要由容器.迭代器.算法.函数对象.内存分配器和适配器六大部分组成.STL已是标准C++的一部 ...
- 在本地（Eclipse）运行第一个strom-starter例子
一.在Eclipse中建立storm项目: 具体步骤如下: 1.在Eclipse中新建java project项目并导入jar包: File-> New -> Java Project - ...
- 常用元素默认margin和padding值问题探讨
关于默认元素在不同浏览器中的margin值是多少的问题,今天做了一个探讨 复制代码 代码如下: // body的margin值 firefox 20.0 ----------------------- ...
- 【BZOJ】1601: [Usaco2008 Oct]灌水（kruskal）
http://www.lydsy.com/JudgeOnline/problem.php?id=1601 很水的题,但是一开始我看成最短路了T_T 果断错. 我们想,要求连通,对,连通!连通的价值最小 ...