常用CSS动画制作技巧及踩坑总结

Posted kuro-p

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了常用CSS动画制作技巧及踩坑总结相关的知识,希望对你有一定的参考价值。

1. CSS 3d透视

  • perspective 属性都是加给父元素的
  • transform-style:preserve-3d; 这个属性必须与transform一同使用,它使被转换的子元素保留其 3D 转换(即设置给父元素)
<!--这里是一个简单的透视的例子-->
<div class="door-border">
    <div class="door">我是门</div>
</div>
.door-border{
    border: 3px solid #aaa;
    width: 150px;
    height: 200px;
    perspective-origin: top;
    perspective: 200px;
    transform-style: preserve-3d;
}

.door-border .door{
    border: 1px solid brown;
    width: 100%;
    height: 100%;
    background-color: wheat;
    transform: rotate3d(0,1,0,45deg);
    transform-origin: left;
}

2. 元素本身有animation的属性时,transition 中在animation改变的属性会失效

    有一次制作一个类似于上下浮动的小波浪动画,动画从界面下方进入,由于同时设置的transition和animate对元素的同一个属性进行了更改,触发了此问题。

    解决办法:用伪元素或者嵌套父元素的方式将这两个行为分开 原理就是让transition和animation分别作用于不同的容器。

3. 表单标签没有伪元素

 img标签也没有伪元素

4. z-index失效

5. 抖动动画制作

  制作类似钱包抖动动画时,动画旋转角度可以从 -3deg -> 3deg -> -3deg -> 3deg 看起来比较顺畅

  如果是 6deg -> 0deg -> -6deg -> 0deg 会在 0deg 时,动画有卡顿现象(即不要把中间值设置为关键帧

6. 循环滚动动画原理

  原理(一):第一张与最后一张图完全相同,动画重复播放时没有时间间隔(纯CSS)

    a. transformX(0) -> transformX(-50%) 浏览器正常 移动端(Safari)不播放动画 页面隐藏后才播放 切换时图片会闪一下 原因未知

    b. transformX(0) -> transformX(-width(px)/2) 浏览器正常 移动端(Safari)播放动画 切换时图片会闪一下 原因未知

    c. 用 margin-left: 0 -> margin-left: -50%(用left亦可,二者百分比值都是基于父元素宽度计算的) 浏览器正常  移动端(Safari)播放动画会卡顿(可能是性能导致)

    目前采取c方案 控制卡顿在可接受范围内(由于书写循环动画时并没有考虑到浏览器重排带来的性能问题,故没有用绝对定位的元素来做测试)

    a、b方案的应用场景可适当斟酌

  原理(二):三张相同的图片 原理与轮播图类似 三张图无限轮播效果(主JS)

    PC端正常(要注意当前页面隐藏时取消定时器,否则会出bug),移动端未进行测试

7. 动画中需要用到background-image时,尽量用雪碧图

  在工作中,有一个两张图相互切换的效果,最开始是用keyframe from background-image to background-image (即来回切换两张图片)来实现背景切换的 效果非常差,还会触发离开页面一张图片失效的bug,后来更换雪碧图后,得到流畅的两张图切换的效果。

 

  

 

以上是关于常用CSS动画制作技巧及踩坑总结的主要内容,如果未能解决你的问题,请参考以下文章

Fastlane 一键打包/发布APP - 使用记录及踩坑

TensorFlow保存加载模型参数 | 原理描述及踩坑经验总结

Mysql数据唯一约束与唯一索引案例总结及踩坑记(含NULL值与唯一约束唯一索引的搭配使用)

Python打包工具Pyintealler打包py文件为windows exe文件过程及踩坑记录+实战例子

源码学习成功运行RDAA代码及踩坑记录 - Pytorch版

源码学习成功运行RESD代码及踩坑记录 - Pytorch版