在社区看到不少在ios14 ios15都有这种动画效果出错或者失效的情况,但是一直没有解决方案 除非清除微信缓存,但是这个并没有什么用,因为不能要求客户每次打开页面都清理缓存
h5在ios微信浏览器css动画效果失效 safari正常 有解决方案吗?<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>.</title> <style> body { background: #ededed; } html { font-size: 10px } .wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; animation: down .6s } .cnt { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); padding: 2rem; width: 15rem; height: 15rem; background-color: #06ae56; border-radius: 2rem } @keyframes down { 0% { transform: translateY(-50rem) } 62.5% { transform: translateY(-50rem) } 80% { transform: translateY(1rem) } 85% { transform: translateY(0) } 90% { transform: translateY(1rem) } 100% { transform: translateY(0) } } </style> </head> <body> <div class="wrap"> <div class="cnt"></div> </div> </body> </html>
2022-01-14