1、$(".aa").delay(2500).animate({width:0});  //        延迟

 2、setTimeout(function(){                  --> css3 animate动画库
$(".aa").addClass("animated bounce ")
},500) // 延迟
3、transition:(是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果 例子中width改为all为所有属性都能过渡)
div
{
width:100px;
height:100px;
background:blue;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
} div:hover
{
width:300px;
}
————————————————————
transition和animation的区别:transition是一次动画,需要触发,动的是它本身
animation是可重复动画(多次动画),可以自己在哪动,动的只是它虚拟的,自己本身并没动 transition: 时间 延迟时间 谁动 怎么动; transition: 1s all ease; 1s = 1000ms 多个属性分开动的话,需要用 , 隔开 来分组
transition: 1s; 默认 all 和 ease
transition: property duration timing-function delay; transition-property:all; 运动的属性 width、left、top… width 3s,top 2s
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。 时间 – 在规定时间内完成
transition-timing-function 规定速度效果的速度曲线。 动画类
transition-delay 定义过渡效果何时开始。 延迟时间 pointer-events: none;
/*阻止穿透 - 阻止鼠标在某个元素上运行*/ 4、animation:
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
} @keyframes mymove
{
from {left:0px;}
to {left:200px;}
} @-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
} /*设置不同的时间节点来做不同的操作 例如25%改为20%那么0%里边的动画时间会被缩短 动画会变快*/
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
} animation: name duration timing-function delay iteration-count direction; /*animation的六个值*/
animation-name 规定需要绑定到选择器的 keyframe 名称。。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。(linear ease ease-in ease-out)
animation-delay 规定在动画开始之前的延迟。(time 设置时间)
animation-iteration-count 规定动画应该播放的次数。(n infinite)
animation-direction 规定是否应该轮流反向播放动画。(normal alternate 反向播放前提:播放次数为多次) 重要:animation动画没有改编元素的实际位置;动画完成后会回到起始位置;不回起始位置办法:
animation-fill-mode : none | forwards | backwards | both;
none:不改变默认行为。
forwards :设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始的状态
</style> 4、transform:
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
------------------------------------------- transform-origin: 30px 0;轴心(源(原)点)默认值 center center 支持 任意值 matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。 translate 位移
translate(x,y) 定义 2D 转换。 transform 变形|变幻 translate(x,y),括号中 如果只有一个值,则代表x y为0
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。 一个值的时候,代表x和y。如scale(1)
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。 transform: rotateZ(45deg) rotateX(30deg);如果有rotateZ,必段写在其他的轴的最前面。rotate默认是Z轴
rotate3d(x,y,z,angle) 定义 3D 旋转。 //用法 rotate3d(1,1,1,90deg)
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。 景深 transform-style:flat; 不启用 【是否启用 3D】
transform-style:flat; 开启3D 5、使用3D前先给起父级不需动的元素加上
perspective:150; (设置元素被查看位置的视图:)
-webkit-perspective:150; /* Safari and Chrome */
给要动的元素加上transform-style: preserve-3d;
要旋转的正反量两面加上: backface-visibility: hidden; 6、 我想要的旋转
<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding:10px;
border: 1px solid black;
perspective:500;
-webkit-perspective:500; /* Safari and Chrome */
} #div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
-webkit-animation:mymove 1s; }
@-webkit-keyframes mymove{
from{}
to{
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg); /* Safari and Chrome */
}
}
</style>
</head> <body> <div id="div1">
<div id="div2">HELLO</div>
</div> </body>
</html>

css3动画相关笔记的更多相关文章

  1. css3动画学习笔记

    具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...

  2. CSS3动画相关属性详解

    本文转载于:<https://blog.csdn.net/lyznice/article/details/54575905> 一.2D效果属性 要使用这些属性,我们需要通过 transfo ...

  3. CSS3之动画相关

    CSS3动画相关的属性:transform,transition,animation. 变形Transform 语法: transform: rotate | scale | skew | trans ...

  4. CSS3动画:YouTube的红色激光进度条

    本文只是讨论和实现了动画效果,并未将动画与页面实际下载关联,有朋友们问如何应用,可以使用现成的一些插件比如这个,这个,还有这个. 之前一篇文章<CSS3 动画一瞥>简单介绍了CSS3动画相 ...

  5. !!学习笔记:CSS3动画

    一句话就有css3动画: 2016-6-29 <style type="text/css"> h1{background:#999;} h1:hover{border- ...

  6. 学习笔记 第十四章 使用CSS3动画

    第14章   使用CSS3动画 [学习重点] 设计2D动画 设计3D动画 设计过渡动画 设计帧动画 能够使用CSS3动画功能设计页面特效样式 14.1  设计2D动画 CSS2D Transform表 ...

  7. 学习CSS3动画(animation)

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  8. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  9. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

随机推荐

  1. JAVA字符编码测试

    几点注意: 1,ASCII码和ISO-8859-1都是单字节编码,ASCII码能表示128个字符,ISO-8859-1总共能表示256个字符.都不能表示中文,如果中文字符或其它不在IOS-8859码值 ...

  2. [javaSE] 网络编程(URLConnection)

    获取URL对象,new出来,构造参数:String的路径 调用URL对象的openConnection()方法,获取URLConnection对象 调用URLConnection对象的getInput ...

  3. SpringJunit4 进行单元测试(实例篇--紧接上一章)

    前言: 在做WEB项目时,我们写好了一个Dao和Service后,接下来就是要进行单元测试,测试的时候还要等到Spring容器全部加载完毕后才能进行,然后通过拿到ApplicationContext对 ...

  4. 判断php变量是否定义,是否为空,是否为真的一览表

    分类: 使用 PHP 函数对变量 $x 进行比较 表达式 gettype() empty() is_null() isset() boolean : if($x) $x = ""; ...

  5. 撩课-Web大前端每天5道面试题-Day7

    1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复 渐进增强(progressi ...

  6. hdu 3415 Max Sum of Max-K-sub-sequence 单调队列。

    Max Sum of Max-K-sub-sequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  7. 洛谷P5057 [CQOI2006]简单题(线段树)

    题意 题目链接 Sol 紫色的线段树板子题??... #include<iostream> #include<cstdio> #include<cmath> usi ...

  8. web前端面试题(持续更新)

    此文是我本人在面试的时候遇到的问题和一些同学遇到的问题加资料上面的问题的总结.(将会持续更新,因为未有满意工作) 面试时有几点需要注意: 1.面试题目:根据你的等级和职位的变化,入门级到大神级,广度和 ...

  9. 根据HTML5 获取当前位置的经纬度【百度地图】【高德地图】

    是想让地图的定位用户位置更准确一些. 查看了介绍: http://www.w3school.com.cn/html5/html_5_geolocation.asp 看介绍中拿数据挺简单. <!D ...

  10. CentOS6.5(3)----设置自己安装的程序开机自动启动

    CentOS6.5系统下设置自己安装的程序开机自动启动 方法1. 把启动程序的命令添加到 /etc/rc.d/rc.local 文件中,比如设置开机启动 mysqld: #!/bin/sh # # T ...