transform,transition运用，动画效果cSS3，scale适配缩放,rote旋转,移入移出效果，tweenMax.js动画插件运用

效果cSS3，scale适配缩放,rote旋转,移入移出效果，tweenMax.js动画插件运用"/>

transform,transition运用，动画效果cSS3，scale适配缩放,rote旋转,移入移出效果，tweenMax.js动画插件运用

CSS3 transform 属性

transform 定义动画，向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew。

CSS3 transition 属性

transition 定义要执行的css 要变换时间，效果

transition: property duration timing-function delay;

运用

鼠标移入，放大

.frame4 .uc a:hover{transform:scale(1.1);z-index: 1;transition: transform .4s;
}

鼠标移入，旋转一圈

.close:hover{transform:rotate(360deg);transition: transform 1s;
}

把鼠标指针放到 div 元素上，其宽度会从 100px 逐渐变为 300px：

div
{
width:100px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

使用媒体查询 和 transform:scale() 缩放动画，做适配缩放效果 

@media (max-width: 1750px){.frame2 .role{transform: scale(.9);}   }
@media (max-width: 1540px){.frame2 .role{transform: scale(.8);}   .frame3 .frame-con{transform: scale(.9);}.frame4 .peopleWrapper{transform: scale(.8);}
}
@media (max-width: 1360px){.frame2 .role{transform: scale(.7);}   .frame3 .frame-con{transform: scale(.8);}.frame4 .peopleWrapper{transform: scale(.75);}
}

jq。使用animate（）执行动画

//css
.famre2_swiper{left:258px;opacity:0;
}$('.famre2_swiper').animate({'left':'68px','opacity':'1'
},2000)

tweenMax.js插件

TweenMax.to('.catalogWrapper', .3, {
      opacity:1,
      top: '1.2rem'
    })