-
兼容性降级处理
WEBkitAnimationEnd,WEBkitAnimationstart等
查看全部 -
实现动画的阶跃式变化,不是线性的过渡
Steps的作用是每个关键帧,而不是整个时间
查看全部 -
时间函数的分线性和非线性
善于对比和总结,多看demo,在其中找到答案
查看全部 -
播放次数(iteration-count)
播放方向(direction)即是否轮流播放和反向播放
停止播放的状态(fill-mode)是否暂停播放play-state)
查看全部 -
animation基础和写法
动画名称(@keyframes)
过渡时间(duration)延迟时间(delay)
时间函数(timing-function)
animation和transiton的区别在于
animation是动画名称(@keyframes)
transiton是属性名称(property)
查看全部 -
annimation基础和写法 播放次数(ineration-count) 播放方向(direction)是否轮流播放和反向播放 停止播放状态(fill-mode) 是否暂停(play-state)
查看全部 -
transition基础
属性名称(property)
过渡时间(during)
时间延迟(delay)
时间函数(timing-function)
查看全部 -
css3动画分为过渡动画和帧动画
查看全部 -
transition:width 2s; 动画的效果 transition:width 2s ease; 动画的过渡效果,实现一些缓动的效果开始慢后来快最后又慢 transfrom:routate(45deg) :让盒子旋转45°角 transition:transfrom 2s ease; :盒子有过度的动画旋转效果
查看全部 -
动画的优化
查看全部 -
let $content =document.querySelector('.content'); let initNumber = 0;for(let i = 0;i< 30; ++i) { let lefts = (Math.floor(Math.random()*5+12)); let delay = (Math.floor(Math.random() * 50 + 2)); initNumber += lefts; let ele = document.createElement('div'); ele.className = 'yudi'; ele.setAttribute("style",`left:${initNumber}%; top: ${lefts}%; animation-delay: ${delay/10}s`); console.log(ele);$content.append(ele); } 没有使用jquery,原生实现的红包雨
查看全部 -
动画属性:
transition 真
animation 真
transform 假
①CSS3动画包括transition和animation
②动画常常和transform属性常用
③注意,transform并不是动画属性,但是它在为我们动画的实现做出了杰出的贡献
2、动画属性
①transition是动画属性,主要负责过渡属性的变化
查看全部 -
贝塞尔函数的四个值可以理解为两个控制点p1、p2的坐标。p0和p3的坐标已经确定了
查看全部 -
1、animation基础和写法(一)
①动画名称(name)--@keyframes
②过度时间(duration) 延迟时间(delay)
③时间函数(timing-function)
2、animation基础和写法(二)
①播放次数(iteration-count)
②播放方向(direction)即是否轮流播放和反向播放
③停止播放的状态(fill-mode) 是否暂停(play-state)
3、animation简单运用
①animation适用场景
②animation解决transition display:none bug
③animation 跳动的元素
查看全部 -
1、transition基础和写法
①属性名称(property)
②过度时间(duration) 延迟时间(delay)
③时间函数(timing-function)
2、注意:
①display不能和transition一起使用
②transition后面尽量不要跟all
③常见闪动可以persp和backface-visibility
查看全部
举报