Js动画
show / hide
var div = $('#test-show-hide'); div.show('slow'); // 在0.6秒钟内逐渐显示
div.hide(3000); // 在3秒钟内逐渐消失
slideUp / slideDown
垂直下拉，提前
div.slideUp(3000); // 在3秒钟内逐渐向上消失 div.slideDown(3000); // 在3秒钟内逐渐向下消失
fadeIn / fadeOut
淡入/淡出
div.fadeOut('slow'); // 在0.6秒内淡出
div.animate({ //在3秒内过渡到该状态
opacity: 0.25,
'256px',
height: '256px'
}, 3000, function () {
console.log('动画已结束');
// 恢复至初始状态:
$(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});
CSS3动画
补间动画
transition只能设定初始和结束时刻的两个状态,中间的过程通过自动计算去完成。
transition 有四个子属性：
- transition-property,需要变化的属性：
- transition-duration,在延续时间段，
- transition-timing-function,变换的速率变化
- transition-delay：变换延迟时间。
transition-property，可以指定为all，元素任何可过渡（transition）属性值变化时都将执行过渡（transition）效果。也可以指定为特一变化的属性。
例如可以设置不同的属性，包括旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transition-timing-function、过渡延迟时间 transition-delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<link rel="stylesheet" href="css/animation.css">
</head>
<body>
<section>
<figure class="animation1">
<img src="img/1.jpg" alt="1"/>
<figcaption>
<h1>图片1</h1>
<p>图片介绍</p>
<p>利用动画延迟达到特效</p>
</figcaption>
</figure>
<figure class="animation2">
<img src="img/2.jpg" alt="2"/>
<figcaption>
<h1>图片2</h1>
<p>图片介绍</p>
</figcaption>
<div class="reg"></div>
</figure>
<figure class="animation3">
<img src="img/3.jpg" alt="3"/>
<figcaption>
<h1>图片3</h1>
<p>图片介绍</p>
</figcaption>
<div class="reg"></div>
</figure>
</section>
</body>
</html>
html,body,figure,figcaption,section,h1,div,p{
margin:0;
}
.animation1{
}
figure{
position: relative;
33.33%;
overflow: hidden;
float: left;
height:300px;
}
figure img{
100%;
height:100%;
background: #333;
opacity:0.7;
}
figure figcaption{
font-family: "Microsoft YaHei UI";
transition: all 0.5s ease-in-out;
color: #fff;
position: absolute;
top:10%;
left:10%;
80%;
transform: translate(-250px,0);
}
figure:hover figcaption{
transform: translate(0,0);
}
figure.animation1:hover img{
opacity:0.8;
}
figure.animation1:hover figcaption p{
transform: translate(0,0);
}
.animation1 figcaption h1{
font-size: 16px;
text-align: center;
30%;
background: #333;
opacity:0.3;
}
.animation1 figcaption p{
transition: all 0.4s ease-in-out;
font-size: 12px;
margin-top: 2%;
text-align: center;
30%;
background: #333;
opacity: 0.3;
transform: translate(-250px,0);
}
figure.animation1 figcaption p:nth-of-type(1){
transition-delay: 0.15s;
}
figure.animation1 figcaption p:nth-of-type(2){
transition-delay: 0.3s;
}
figure.animation2 .reg{
border: 2px solid azure;
position: absolute;
80%;
height: 80%;
top:10%;
left:10%;
transition: all 0.4s ease-in-out;
transform:rotate(0deg) scale(0,0);
}
figure.animation2:hover .reg{
transform:rotate(360deg) scale(1,1);
}
figure.animation2 figcaption{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
figure.animation2 figcaption h1{
transition: all 0.4s ease-in-out;
transition-delay: 0.1s;
transform: skew(90deg);
}
figure.animation2 figcaption p{
transition: all 0.4s ease-in-out;
transition-delay: 0.3s;
transform: skew(90deg);
}
figure.animation2:hover figcaption h1{
transform: skew(0deg);
}
figure.animation2:hover figcaption p{
transform: skew(0deg);
}
figure.animation3 .reg{
border: 2px solid azure;
position: absolute;
80%;
height: 80%;
top:10%;
left:10%;
transition: all 0.4s ease-in-out;
transform:scale(0,0);
}
figure.animation3:hover .reg{
transform:scale(1,1);
}
figure.animation3 figcaption{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
figure.animation3 figcaption h1{
transition: all 0.4s ease-in-out;
transition-delay: 0.1s;
transform: scale(0,0);
}
figure.animation3 figcaption p{
transition: all 0.4s ease-in-out;
transition-delay: 0.3s;
transform: scale(0,0);
}
figure.animation3:hover figcaption h1{
transform: scale(1,1);
}
figure.animation3:hover figcaption p{
transform: scale(1,1);
}
