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