写代码啦

CSS动画

2020-06-26 15:35

个人觉得,这部分饥人谷的课程讲的不是很全面,可能是老师的习惯,对于小白来说,这节课程真正重要的两种过渡的属性都没有介绍,只是给了个简写,给了个查找路径,了解更多,自己去查

浏览器的渲染过程

  1. 根据HTML生成HTML树(DOM)
  2. 根据CSS生成CSS树(CSSOM)
  3. 将两棵树合并成一颗渲染树(render tree)
  4. Layout布局(文档流,盒模型,计算大小和布局)
  5. point绘制(把边框颜色,文字颜色,阴影画出来)
  6. composite 合成(根据层叠关系展示画面)

    三种树模型

    DOM CSSOM RenderTree

简单带一下JS,如何用JS来更新模式

div.style.background = "red"设置属性
div.style.display="block"设置属性
div.classList.add("red");添加节点
div.remove()直接删除节点

CSS 性能优化

css性能优化

把left改成transform
使用will-change或translate

JS优化

使用requestAnimationFrame代替setTimeOut

transform全解

transform中的几个属性
translate: 移动
rotate:旋转
scale:放大/缩小
skew:倾斜
如果用transform缩写:属性间用空格隔开

transition过渡

作用:补充中间帧

  • transition-property:添加过渡效果的样式属性名称
    transition:left
  • transition-duration:过渡效果的耗时
    transition:2s
  • transition-timing-function:设置时间函数,控制运动速度
    transition-timing-function :linear
  • transition-delay:过渡效果的延时
    transition-delay:2s
    上述属性简写:transition:属性名称 过渡时间 时间函数 延迟
    属性间用空格隔开
    同时添加多个样式时,用逗号隔开
    为所有样式添加过渡效果
    transition:all 2s

animation过渡

创建动画

@keyframes xxx{
    0%{
        transform:translate(0,0);
    }
    50%{
        transform:translate(200px,0);
    }
    100%{
        transform:translate(200px,200px);
    }
}

也可以用from表示0% 用to表示100%

animation的属性和transition差不多

  • animation-duration:2s;
  • animation-iteration-count:设置动画循环播放次数
  • animation-direction:alternate来回播放
  • animation-delay:2s;
  • animation-fill-mode:设置动画结束时的状态
    forwards保留动画结束时的状态,在有延迟时不会立即进入动画的初始状态
    backwards:不会保留动画结束时的状态,再添加了动画延迟的前提下,如果动画有初始状态,先进入初始状态
    both:保留动画结束状态,有延迟立即进入初始状态
  • animation-timing-function:动画的时间函数
  • animation-play-state:paused/running设置动画的播放状态
  • animation的缩写:
    animation:时长|过渡方式|延迟|次数|方向|填充模式|是否暂停|动画名
    顺序可以任意改变

用transform写的跳动的红心(jsbin)

http://js.jirengu.com/jisab/1/edit?html,css,output

用transition写的跳动的红心(jsbin)

http://js.jirengu.com/yelas/1/edit?html,css,output

用animation写的跳动的心(jsbin)

http://js.jirengu.com/feriv/1/edit?html,css,output

161 1 1
161 1 1
    登录后回复