-
2、动画属性①transition是动画属性，主要负责过渡属性的变化②animation是动画属性，他可以实现transition做不到的事情，animation可以直接加载动画，transition需要一个触发，需要js协助③transform不是动画属性，它是一个静态类，经常和动画类属性搭配
查看全部 -
demo查看全部 -
说实话是实话实说设计和建设查看全部
-
transition
property
duration
过渡效果
2. display不能和transition一起使用
查看全部 -
①掌握transition和 animation
② 模仿
③独自开发
查看全部 -
css
帧动画
过度动画
动画属性
transition
animation
查看全部 -
什么是动画
查看全部 -
学习CSS3意义
查看全部 -
文档流，属性变化的情况下查看全部
-
很好查看全部
-
动画监听事件：
查看全部 -
时间函数记录
查看全部 -
1，第一阶段:熟练的使用transition 和 animation 中的 name during
2，第二阶段：模仿阶段 模拟效果 观察思路方案
3，第三阶段：自己开发复杂的开发和实现
CSS3动画必备基础
Css3新属性和其他Css3静态属性
Chrime浏览器调试工具
掌握JS的基本的API，例如属性选择、事件监听
查看全部 -
CSS3 动画包括Transiton 和 aniantion
动画常常和transform属性常用
值得注意的是 transform并不是动画属性，但是动画的实现离不开它
CSS3动画可以做一些功能性的菜单按钮
宣传的轮播图，各种页面的缓冲
页面间的切换过渡，网页小游戏
Swiper
|
Vue-transition — CSS动画 — Animate.css
|
SVG
查看全部 -
transform并不是动画属性，但是它在为我们动画实现做出了杰出的贡献
查看全部 -
css3 动画 transition animation
动画常常和transform属性常用
查看全部 -
谢谢老师。查看全部
-
2查看全部
-
过度和动画在js中监听
监听的事件：animationstart animationend transitioned animationiteration
在360 safari和部分chrome下需要WebkitAnimationEnd,IE和firefox已经做了兼容直接写就可以
查看全部 -
animation
动画名称（name）@keyframes
过渡时间(duration)
延迟时间(delay)
时间函数(timing-function)
位移尽量使用：transform:translateX(200px)x轴水平位移
animation和transition的区别：
animation可以定义播放次数（iteration-count）
播放方向(direction)即是否轮流播放和反向播放
停止播放的状态(fill-mode) 是否暂停
infinite：无限播放 可以直接写数字表示播放次数
播放方向:alternate:先正后反
reverse:反向 从结束位置往开始位置播放
停止播放的状态：forwards 停在最后一帧的位置
animation适用场景：跑马灯 loading动画 帧动画
animation解决了transition display:none bug
查看全部 -
Transition:过渡动画 类似的一个：transform
四大属性：
属性名称：property 1代码顺序
过渡时间:duration 2
延迟时间：delay 4
时间函数：timing-function 3
scss:&:hover{} 伪类选择器：鼠标滑过时的样式 相当于.demo-1:hover{}
.demo-1{
&:hover{
}
transition:width 2s linear (ease) 2s;
}
特性：当文档流的属性有变化的时候才会实现过度，而且文档流开始有一个 初始化
时间函数：实现一个缓动的效果
注意点：display不能和transition一起使用
transition需要元素在文档中有一个初始的属性，浏览器读不到display的任何属性值
transition后边尽量不要跟all 造成浏览器大量计算资源
常见闪动：perspective和backface-visibility
查看全部
demo
举报