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;

transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

 

运用

鼠标移入，放大

.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'
    })