<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{padding:0margin:0border:0}
.left{width:50%float:left
animation:myfirst 5s
-moz-animation:myfirst 5s/* Firefox */
-webkit-animation:myfirst 5s/* Safari and Chrome */
-o-animation:myfirst 5s/* Opera */
}
.right{width:50%float:left
animation:myfirst 5s
-moz-animation:myfirst 5s/* Firefox */
-webkit-animation:myfirst 5s/* Safari and Chrome */
-o-animation:myfirst 5s/* Opera */
animation-delay: 5s/* W3C 和 Opera */
-moz-animation-delay: 5s/* Firefox */
-webkit-animation-delay: 5s/* Safari 和 Chrome */
}
@keyframes myfirst
{
0% { opacity:0}
100% { opacity:1}
}
@-moz-keyframes myfirst /* Firefox */
{
0% { opacity:0}
100% { opacity:1}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% { opacity:0}
100% { opacity:1}
}
@-o-keyframes myfirst /* Opera */
{
0% { opacity:0}
100% { opacity:}
</style>
</head>
<body>
<div>
<div class="left"><img src="images/xxx.jpg"></div>
<div class="right">文字XX </div>
</div>
</body>
</html>
过渡（transition）
多个属性间使用,隔开
如果所有属性都需要过渡，则使用all关键字
大部分属性都支持过渡效果，注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡（auto不是有效数值，过渡动画效果不会生效）
时间单位：s 和 ms 1s = 1000ms
指定过渡的执行的方式
可选值：
transition-delay: 2s
可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中第一个是持续时间，第二个是延迟
动画和过渡类似，都是可以实现一些动态的效果，不同的是过渡需要在某个属性发生变化时才会触发, 动画可以自动触发动态效果。
关键帧语法：
animation-name: 要对当前元素生效的关键帧的名字
animation-name: test
animation-duration: 4s
animation-delay: 2s
可选值：
可选值：
可选值：
可选值：
animation: test 2s 2 1s alternate 和transition 的简写类似 ，执行时间和延时时间顺序注意
变形就是指通过CSS来改变元素的形状或位置.
变形不会影响到页面的布局
transform 用来设置元素的变形效果
transform: translateY(-100px)
平移：平移元素，百分比是相对于自身计算的(px,100%)
z轴平移，调整元素在z轴的位置，正常情况就是调整元素和人眼之间的距离，距离越大，元素离人越近
z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视，如果需要看见效果
, 必须要设置网页的视距
/* 设置当前网页的视距为800px，人眼距离网页的距离 */
perspective: 800px
通过旋转可以使元素沿着x y 或 z旋转指定的角度 开视距效果明显
rotateX()
rotateY()
rotateZ()
单位 角度 deg、 n turn（圈）
**是否显示元素的背面 **
backface-visibility: hidden
<div id="a1"></div><div id="a2"></div><div id="a3"></div>//引入jQuery.js<script>var t1=$("#a1").offset().topvar t1=$("#a2").offset().topvar t1=$("#a3").offset().top$(window).scroll(function(){var top=$(window).scrollTop()if(top>t1&&top<t2){
$("#a1").addClass("an1")
}if(top>t2&&top<t3){
$("#a2").addClass("an1")
}if(top>t3){
$("#a3").addClass("an1")
}
})</script>
