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

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>
相关推荐
用户059540174464 小时前
把AI长期记忆测试从手动验证换成pytest,2天揪出11个隐藏Bug
前端·css
a1117766 小时前
唯美花朵风格的黑胶唱片音乐播放器
前端·css·css3
布兰妮甜11 小时前
CSS 现代布局终极方案:Grid 完整实战,替代浮动/弹性布局复杂场景
css·grid·实战教程·浮动·web布局
JR空位投 李佃贵是15 小时前
如何编写轻量级 CSS 框架
前端·css·tensorflow
寒水馨1 天前
Windows下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-windows-x64.exe)
前端·css·前端开发·tailwind css·utility-first·css 框架·独立 cli
思码梁田2 天前
CSS 定位详解:从相对到固定,掌握网页布局的核心
前端·javascript·css
muddjsv2 天前
CSS 高级选择器精讲:伪类、伪元素、逻辑伪类与选择器解耦规范
前端·css
用户446846004802 天前
C 语言分支与循环语句总结
css
寒水馨2 天前
macOS下载、安装 Tailwind CSS-v4.3.3(附安装包tailwindcss-macos-arm64)
前端·css·macos·tailwind css·utility-first·css 框架·实用优先
朕的剑还未配妥2 天前
CSS 实现渐变毛玻璃:从 backdrop-filter 到多层 mask
前端·css