阅读 140

css动画知识总结

浏览器渲染原理

浏览器渲染的过程:

根据HTML标记并构建DOM树

根据CSS构建CSS树(CSSOM)

将两棵树合并成一棵渲染树(render tree layout布局(文档流,盒模型,计算大小或位置等)

paint绘制(边框颜色,背景颜色,阴影等绘制)

compose合成(根据层叠关系展示画面)

1.png

1. 通过用transform + transition

实现思路:使用transform属性里的translateX来完成移动,然后加上transition的过渡效果。

实现案例: js.jirengu.com/qotexonazi/…

CSS代码:

#demo {
  width: 50px;
  height: 50px;
  background-color: red;
  /*给demo加一个简单的样式以方便查看*/
  transition: all 1s;
}
#demo.go{
  transform:translateX(100px);
  /*这里提前写一个类go,用translateX来完成向右移动*/
}
复制代码

CSS代码有两行重点:

transition: all 1s; 让整个移动在1s内完成, transition的作用就是给我开头和结尾,我来补充中间帧

transform:translateX(100px); 用translateX(100px)来实现右移

JS代码:

start.onclick = function(){
  demo.classList.add('go');
 //给按钮添加点击事件,当点击按钮的时候,就给demo加上go类
}
复制代码

实现效果:

1.gif

2.用animation

animation的核心就是定义关键帧, 其中go是这个动画的名字

1.第一种写法,用from, to
@keyframes go {
  from {transform:none;}
  
  to {transform:translateX(100px);}
}

2.第二种写法
@keyframes go {
  0 {transform:none;}
  100% {transform:translateX(100px);}
}
复制代码

然后,多写一个start类,指定让go运行2秒

#demo.start{
  animation:go 2s;
}
复制代码

JS添加上这个类:

start.onclick = function(){
  demo.classList.add('start');
 //给按钮添加点击事件,当点击按钮的时候,就给demo加上go类
}
复制代码

预览效果: js.jirengu.com/zofaxafiba/…

关于transition的总结

transition就是过渡的意思,作用就是我一个行为开头和结尾,然后中间我来帮你添加一个过渡的效果。

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */ 用逗号隔开
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */ 用all表示给所有Property添加动画
transition: all 0.5s ease-out;
复制代码

关于animation的总结

animation组成部分

1.关键帧 keyframes

2.animation 属性

因为我们可以在任意一个点指定关键帧,所以animation可以用来做更复杂的动画

文章分类
前端
文章标签