CSS3动画基础


介绍CSS3的动画基础以及transition和animation的写法,时间函数的应用,结合js开发优美的过渡效果,多方面结合。

CSS动画的特点:

  • 开发周期短
  • 增加浏览页面的趣味性
  • 增加用户的视觉冲击力

一、CSS动画介绍

CSS 3 既有帧动画,又有过渡动画

动画的两个属性:transitionanimation

动画常和transform属性常用,但是它并不是动画属性,它会主动开启浏览器的加速,也即实现GPU加速,让我们的动画更加细腻,不会改变原有的文档流的结构,防止页面的频繁闪现。

动画的兼容:IE9及之前不支持动画

动画的应用:

  • 功能性的菜单按钮
  • 宣传用的轮播图,各种页面效果的缓冲
  • 页面之间的切换过渡,网页小游戏

CSS动画的扩展:
Vue-transition , sniper, Animate.css, svg 等都需要动画基础

二、CSS基础知识

  1. transition基础和写法

🔸 属性名称(property)

🔸 过渡效果周期和(duration)和延迟时间(delay)

🔸 速度效果的速度曲线(timing-function)

使用示范:

.box{
  width: 100px;
  height: 100px;
  background: #6d6d6d;
}
.demo-1{
  &:hover{
    width: 500px;
  }
  // linear ease
  transition: width 2s linear 2s; // ease
}
.demo-2{
  &:hover{
    transform: rotate(45deg); // 旋转45度
  }
  transition: transform 1s ease-out; 
}

🔴 Tips:

  • display不能和transition一起使用
  • transition后面尽量不要跟all
  • 常见的闪动可以使用perspective 和 backface-visibility
  1. animation的基础和写法

🔸 动画名称(name)— @keyframes

🔸 动画完成的周期(duration)延迟时间(delay)

🔸 动画的播放速度(timing-function)

使用示例:

.demo-2{
  &:hover{
    .cell{
      animation: move 2s linear;
    }
  }
  .cell{
    width: 200px;
    height: 200px;
    background: red;
  }
}
@keyframes move{
  100%{
    transform: translateX(200px);
  }
}

animation相当于升级版的transition,还可以定义下列属性:

🔸 播放次数(iteration-count)
🔸 播放方向(direction)即是否轮流播放和反向播放
🔸 停止播放的状态(fill-mode ) 是否暂停⏸️(play-state)

infinite表示可以无限循环播放
alternate表示正反向播放,reverse表示反向播放
forwards表示停留在最后一帧, running无限播放
实例:animation: move 2s linear 2 alternate forwards

使用场景:
跑马灯,loading
animation解决了transition display:none bug
跳动的元素:

.demo-4{
  margin: 40px auto;
  border-radius: 50%;
  animation: jump 2s ease-in infinite;
}
@keyframes jump{
  0%{
    transform: translateY(0px);
  }
  40%{
    transform: translateY(200px);
  }
  50%{
    transform: translateY(200px);
  }
  100%{
    transform: translateY(0px);
  }
}

三、属性详解

  1. 时间函数:管理着动画在单位帧内播放的速度曲线
    使用的是 三次贝塞尔函数 的数学函数
    预设值 linear ease ease-in ease-out ease-in-out
.loading{
  width: 108px;
  height: 108px;
  background: url(./img/loading.png) no-reapt;
  border-radius: 50%;
  animation: round 1s step(12) infinite;
}
@keyframes round{
  100%{
    transform: rorate(360deg);
  }
}
.tuizi{
  width: 200px;
  height: 200px;
  animation: run .5s steps(6) infinite;
  background: url(./img/tuzi.png) no-repeat;
}
@keyframes run{
  50%{
    background-position-x: -1200px;
  }
  100%{
    background-position-x: -2400px;
  }
}
  1. 过渡和动画在js中的监听

js可以使动画的实现变得更加强大

🔸 animationstart
🔸 animationend、transitionend
🔸 animationiteration

对上面的例子实现监听

let runstart = () => { console.log('run start') }
let runend = () => { console.log('run end') }
let iteration = () => { console.log('iteration') }
let $loading = document.querySelector('.loading')
$loading.addEventListener('animationstart', runstart) 
$loading.addEventListner('animationend', runend)
$loading.addEventListner('animationiteration', iteration)

监听事件的兼容性

  • 在360,Safari和部分Chrome下需要webkitAnimationEnd
  • IE 和 Firebox已经做了兼容可以直接写
$loading.addEventListener('webkitAnimationStart', runstart) 

四、动画实战

  1. animation落雨到红包雨的实现
body,html{
  height: 100%;
}
.content{
  position: realtive;
  height: 100%;
  background: #f2f2f2;
  overflow: hidden;
  .yudi{
    position: absolute;
    opciaty: 0;
    animation: drops 1.2s cubic-bezier(.54,.02,.51,.25) infinite;
    width: 60px;
    height: 60px;
    background: url(../img/hongbao.png) no-repeat;
    background-size: auto 60px;
  }
}
@keyframes drops{
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  90%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translate3d(10px,100vh,-10px);
  }
}

使用jquery代码如下:

let $content = $('.content');
let initNumber = 0;
for(let i = 0; i < 30; i++){
  let lefts = Math.floor(Math.random()*5+2);
  let delay = Math.floor(Math.random()*50+2);
  initNumber += lefts;        
  let $div = $('
').addClass('yudi').css({ "left": `${initNumber}%`, "top": `${lefts}%`, "animation-delay": `${delay/10}s` }); $content.append($div); }
  1. js配合动画属性实现图片无限滚动效果

实现类似<marquee>的弹幕滚动效果

  1. transition实现轮播效果实战

实现swiper

三个小栗子我都在这个git仓库里👉CSS3 Animation


Author: Casey Lu
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint polocy. If reproduced, please indicate source Casey Lu !
评论
 Previous
Git摸爬滚打——Git push remote rejected {change ### closed} Git摸爬滚打——Git push remote rejected {change ### closed}
最近在提交项目的时候,遇到了这样一个问题,就是出现了多个没有保存的本地的commit,在push到远程仓库的时候显示git push remote rejected{change ### closed},仔细看了下问题,主要是因为自己本地的
2020-04-08
Next 
HTML5存储 HTML5存储
本文主要介绍三种HTML5的浏览器端存储方式,以及每种方式具体的实现原理,操作规范以及它们各自的优缺点和适用场景,同时也会介绍一些非主流的存储方式。 一、关于浏览器存储 在H5之前,有cookie 和 userdata 1) cookies
2020-04-03
  TOC