下面是实际效果:(可以自己移动鼠标,尝试效果)
(由于篇幅长度,没有加兼容性前缀,演示环境为谷歌浏览器。)
现在就一个一个效果单独演示:
演示demo的HTML内容为:
<div class="moyu">魔芋</div>
CSS:
div {
width:200px;
height:200px;
background: red;
margin:50px;
color:#fff;
line-height:200px;
font-size:30px;
text-align:center;
}
淡入:(改变透明度)
.moyu {
-webkit-animation: change 2s ease;
animation: change 2s ease;
}
@-webkit-keyframes change {
0%{
opacity:0;
}
100%{
opacity:1;
}
}
@keyframes change {
0%{
opacity:0;
}
100%{
opacity:1;
}
}
效果:
淡出就是调整opacity从1到0.
淡入-从下
说明:就是加是transform 的translate
.moyu {
-webkit-animation: change 2s ease infinite;
animation: change 2s ease infinite;
}
@-webkit-keyframes change {
0%{
opacity:0;
-webkit-transform:translateY(-100px);
transform:translateY(-100px);
}
100%{
opacity:1;
-webkit-transform:translateY(0px);
transform:translateY(0px);
}
}
@keyframes change {
0%{
opacity:0;
-webkit-transform:translateY(-100px);
transform:translateY(-100px);
}
100%{
opacity:1;
-webkit-transform:translateY(0px);
transform:translateY(0px);
}
}
(魔芋解释:由于录制gif图片效果不是很好,请见谅。)
弹跳
改变transform:translateY的值
@-webkit-keyframes change {
0%,
20%,
50%,
80%,
100%{
-webkit-transform: translateY(0);
}
40%{
-webkit-transform: translateY(-30px);
}
60%{
-webkit-transform: translateY(-15px);
}
}
弹入
透明度结合transform:scale
@-webkit-keyframes change {
0%{
opacity:0;
-webkit-transform: scale(0.3);
}
50%{
opacity:1;
-webkit-transform: scale(1.05);
}
70%{
-webkit-transform: scale(0.9);
}
100%{
-webkit-transform: scale(1);
}
}
转入
@-webkit-keyframes change {
0%{
opacity:0;
-webkit-transform: rotate(-200deg);
}
100%{
opacity:1;
-webkit-transform: rotate(0);
}
}
翻转
@keyframes change {
0%{
transform: perspective(400px) rotateY(0);
animation-timing-function: ease-out;
}
40%{
transform: perspective(400px) translateZ(150px) rotateY(170deg);
animation-timing-function: ease-out;
}
80%{
transform: perspective(400px) rotateY(360deg) scale(0.95);
animation-timing-function: ease-in;
}
100%{
transform: perspective(400px) scale(1);
animation-timing-function: ease-in;
}
}
闪烁
@keyframes change {
0%,
50%,
100%{
opacity:1;
}
25%,
75%{
opacity:0;
}
}
震颤
@keyframes change{
0%,
100%{
transform: translateX(0);
}
10%,
30%,
50%,
70%,
90%{
transform: translateX(-10px);
}
20%,
40%,
60%,
80%{
transform: translateX(10px);
}
}
摇摆:
@keyframes change{
20%{
transform: rotate(15deg);
}
40%{
transform: rotate(-10deg);
}
60%{
transform: rotate(5deg);
}
80%{
transform: rotate(-5deg);
}
100%{
transform: rotate(0);
}
}
摇晃:
@keyframes change{
0%{
transform: translateX(0);
}
15%{
transform: translateX(-100px) rotate(-5deg);
}
30%{
transform: translateX(80px) rotate(3deg);
}
45%{
transform: translateX(-65px) rotate(-3deg);
}
60%{
transform: translateX(40px) rotate(2deg);
}
75%{
transform: translateX(-20px) rotate(-1deg);
}
100%{
transform: translateX(0);
}
}
响铃:
@keyframes change {
0%{
transform: scale(1);
}
10%,
20%{
transform: scale(0.9) rotate(-3deg);
}
30%,
50%,
70%,
90%{
transform: scale(1.1) rotate(3deg);
}
40%,
60%,
80%{
transform: scale(1.1) rotate(-3deg);
}
100%{
transform: scale(1) rotate(0);
}
}
**
时间: 2024-10-06 00:31:13