css实现html元素渐变淡入且有位移

DOCTYPE html>
<html lang="en">
<head>  
<meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <title>Documenttitle>
 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>1111div>  <div>3333div>  <div>4444div>
 body>
 html>

你可能感兴趣的:(css,css)