css|css/js常用动画

概念区分

transform(变形)——组合属性,可以只设置其中一个/多个属性值,空格隔开。属性定义元素的形状/位置变化,:可以定义五个子属性:
移动translate
缩放scale
旋转rotate
扭曲skew
矩阵变形matrix元素
translate(移动)——transform的一个属性值,定义元素的移动效果
translate(x,y)两坐标同时移动,可以使用百分比
translateX(x)单方向移动
translate3d(x,y,z)定义 3D 移动
【css|css/js常用动画】transition(过渡)——定义某种属性的过渡效果,是一个简写属性,可以定义四个子属性:
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
animation(动画) animation 定义某种keyframe的动画效果,属性是一个简写属性,用于设置六个动画子属性:
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
伪类(Pseudo-classes) 为不同状态的元素为其添加对应的样式,使用单冒号(:)表示伪类
:hover 把鼠标放在链接上的状态
:active 已选中的链接
伪元素用于创建一些不在文档树中的元素,并为其添加样式。使用双冒号(::)/(:)表示伪元素
::before 在元素内容之前插入额外生成的内容
::after 在元素内容之后插入额外生成的内容
:first-line 向文本的首行设置特殊样式,“first-line” 伪元素只能用于块级元素。
:first-letter 向文本的首字母设置特殊样式
::selection 对用鼠标键盘等已选取的文字部分应用样
移动动画实现 1.transition+:hover伪类实现图片悬浮移动动画
  • js或jquery 元素移动以像素计算,手机上移动效果会有卡顿
  • 利用CSS3 transition 可以很简单的实现流畅的移动动画
  • 原始元素.floatBox设置样式移回原位置的效果,同样为效果设置过渡时间
  • .floatBox:hover设置左移效果,悬浮时触发
css代码:
/* 元素样式 */ .floatBox { width: 300px; background-color: rgb(221, 143, 143); /* x=0代表移回原位置 */ transform: translateX(0); /* 移回也需要0.4s时间过渡 */ transition: transform 0.4s; }/* hover样式 */ .floatBox:hover { /* x=-10px代表左移10px */ transform: translateX(-10px); /* 0.4s完成transform移动效果*/

效果展示
https://codepen.io/juwuyu/pen/MRezYe
2.鼠标移入画面向上移动 思路:
  • 容器宽度固定,高度根据子元素变化
  • img设置高度138px,title设置高度28px
  • title设置margin-top: -28px; 实现位移,和img重叠
  • 容器伪类:hover title设置高度,line-height,margin-top三项填满,实现 全重叠+文字居中效果
  • img和title设置 transition: 0.4s;
css代码:
/* 2.鼠标移入画面向上移动 */ .img-wrapper { width: 300px; }.img-wrapper .img { height: 138px; background-color: rgb(221, 143, 143); }.img-wrapper .title { /* margin-top设置为负值,实现重叠效果 */ margin-top: -28px; text-align: center; height: 28px; line-height: 28px; background-color: rgba(222, 134, 57, 0.8); /* 所有属性过渡时间 */ transition: 0.4s; }.img-wrapper:hover .title { /* margin-top为-容器总高度,填满容器 */ margin-top: -138px; text-align: center; /* height+linehright实现文字居中 */ height: 138px; line-height: 138px; background-color: rgba(222, 134, 57, 0.8); /* 所有属性过渡时间 */ transition: 0.4s; }

效果展示:
https://codepen.io/juwuyu/pen/XQKyyE
三、元素变形 1.requestAnimationFrame生成进度条 思路:
  • requestAnimationFrame在浏览器下次刷新之前前调用指定的回调函数更新动画,递归调用可以实现流畅的动画
  • timer储存计时器标志,用于清除计时器
  • 再回调函数里先判断宽度是否大于500px
  • 小于,动画没结束,修改样式,递归调用 requestAnimationFrame
  • 大于,动画结束,清除计时器cancelAnimationFrame(timer)
js代码:
var timer; //计时器id var btn = document.getElementById('btn') btn.onclick = function() { myDiv.style.width = "0"; cancelAnimationFrame(timer); //清除计时器 timer = requestAnimationFrame(function fn() { if (parseInt(myDiv.style.width) < 500) {//宽度小于500,修改样式 myDiv.style.width = parseInt(myDiv.style.width) + 5 + "px"; myDiv.innerHTML = parseInt(myDiv.style.width) / 5 + "%"; timer = requestAnimationFrame(fn); //递归调用计时器 } else { cancelAnimationFrame(timer); //宽度大于500,清除计时器 } }); };

效果展示:
https://codepen.io/juwuyu/pen/pBLdao

    推荐阅读