css实现html元素渐变淡入且有位移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@keyframes testAnimation {
0% { transform: translateY(100%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
div{
animation: testAnimation 0.8s ease-in-out;
animation-fill-mode: forwards;
}
</style>
<body>
<div>1111</div> <div>3333</div> <div>4444</div>
</body>
</html>
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码