• 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动画的更多相关文章

  1. jQuery Animation实现CSS3动画

    jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态.CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:3 ...

  2. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  3. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  4. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  5. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  6. css3实践之图片轮播(Transform,Transition和Animation)

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  7. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  8. CSS3 Transform、Transition和Animation属性总结

    CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...

  9. CSS动画transform、transition和animation的区别

    CSS3属性中关于制作动画的三个属性:Transform,Transition,Animation. 1.transform:描述了元素的静态样式,本身不会呈现动画效果,可以对元素进行 旋转rotat ...

随机推荐

  1. libyuv 编译for ios

    这里有编译好的库 https://bintray.com/yarr/ios/libyuv-ios# lipo -info libyuv.a  Architectures in the fat file ...

  2. Matrix Chain Multiplication[HDU1082]

    Matrix Chain Multiplication Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (J ...

  3. extjs 2.0获取选中的radio的值

    var temp=winFormPanel.getForm().findField('selectedType').getGroupValue();

  4. HDU 5067 (状态压缩DP+TSP)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5067 题目大意:蓝翔挖掘机挖石子.把地图上所有石子都运回起点,问最少耗时. 解题思路: 首先得YY出 ...

  5. 【POJ】1743 Musical Theme

    http://poj.org/problem?id=1743 题意:不可重叠最长重复子串,n<=20000,具体看<后缀数组>-- 罗穗骞 #include <cstdio&g ...

  6. ASP.NET RepeatLayout 属性

    定义和用法 RepeatLayout 属性用于设置或获取如何显示在 CheckBoxList 中的项目. 语法 <asp:CheckBoxList RepeatLayout="mode ...

  7. [转]Redis集群的配置

    一:memcache 和 Redis 对比总结 [memecache 特点] 1:速度最快(没有自测,但网上有详细的测试用例) 2:支持水平扩展,可以任意添加节点 [redis 特点] 1:速度没有m ...

  8. Java实现FTP文件上传与下载

    实现FTP文件上传与下载可以通过以下两种种方式实现(不知道还有没有其他方式),分别为:1.通过JDK自带的API实现:2.通过Apache提供的API是实现. 第一种方式 package com.cl ...

  9. c++模版函数

    1.定义 可以使用class或者typename字段来申明 template <class T> template <class T1, class T2, ...class TN& ...

  10. php构造函数,引入数据库操作类函数

    <?php /**     * 基于左右值排序的无限分类算法     * 数据库结果为 CREATE TABLE om_catagory (      CatagoryID int(10) un ...