博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于几天来研究使用css3动画的一点总结
阅读量:4973 次
发布时间:2019-06-12

本文共 538 字,大约阅读时间需要 1 分钟。

1. 为避免合成线程频繁计算导致性能降低,

  使用transform属性,尽量避免使用width / height / padding / left 等。

2. 侧边栏下阴影遮罩层动画,

  如果用background:rgba(0,0,0,0) -> background:rgba(0,0,0,.3),在chrome浏览器上侧边栏的translate动画会不流畅;

  改为background: #000; opacity: 0 -> opacity:0.3解决。

3.遮罩层渐入渐出效果,transition和display同用导致动画失效,

  display没有动画效果,加上这个属性元素即刻便处于有或没有的状态,

  改为visibility,visibility属性有渐变效果。同时,visibility:0时虽然在页面上占有位置,但不会遮挡下层页面。

4.侧边栏滑入滑出效果,

  用translate3d代替translateX或transate,

  同时添加will-change:transform,

  滑动流畅度会有非常明显的提高。

 

 

 

转载于:https://www.cnblogs.com/wangxiaohang/p/9049499.html

你可能感兴趣的文章
Servlet 编写过滤器
查看>>
Redis 数据类型
查看>>
Console-算法-回文数
查看>>
C#常用格式输出
查看>>
创建数据库表的SQL语句
查看>>
在Visual Studio 2010[VC++]中使用ffmpeg类库
查看>>
POJ 1488 TEX Quotes
查看>>
Flink的分布式缓存
查看>>
002-2电容隔直的本质
查看>>
Java中a+=b和a=a+b的区别
查看>>
codeforces-1131 (div2)
查看>>
虚拟机创建
查看>>
$Linux vi/vim编辑器常用命令与用法总结 (Markdown编辑版)
查看>>
mvc3之入门程序 第二讲
查看>>
信息安全学习笔记--XSS
查看>>
ascii
查看>>
POJ - 2723 Get Luffy Out (二分+2-SAT)
查看>>
Wannafly交流赛1 E 迷宫2
查看>>
20145304 实验四实验报告
查看>>
直联和间联的区别——直连和间连的区别
查看>>