手写CSS3动画的几种流派

最新推荐文章于 2024-04-20 10:09:28 发布
最新推荐文章于 2024-04-20 10:09:28 发布
阅读量90 收藏
点赞数
文章标签： git
原文链接：https://segmentfault.com/a/1190000012246337
版权

阳春三月,人好,物好,心情好. 差不多也是get新技能的时期. 作为一名能力者,我们将目标锁定到了css3 animation中. 众所周知, 自从css3 加入了 3d硬件加速 就变的叼的一b 动画执行线程单独独立执行,使得我们触碰到了GPU这个神奇的东西, 性能一下子提高八度. 众多场景应用 微应用 营销活动 充斥在我们的朋友圈中. css3动画虽然 上手简单 随便都能搞一发 , 但是想要得心应手 运用自如还是需要 一定的深度的, 下拉我们来看下 我们需要 掌握 css3动画 中的那些能力.

源码git

以下部分saas函数代码可在源码中查看
https://github.com/sherlock22...

为了保证兼容性 使用saas抽象部分函数:

@charset "utf-8";
/**
 * sherlock221b
 * 动画部分常用
 */


//transform 兼容
@mixin transform($value) {
  -webkit-transform: $value;
  transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
}

//transition 兼容
@mixin transition($value) {
  -webkit-transition: $value;
  transition: $value;
  -moz-transition: $value;
  -ms-transition: $value;
}

//animation 兼容
@mixin animation($animationName) {
  -webkit-animation: $animationName;
  -ms-animation: $animationName;
  -moz-animation: $animationName;
  -o-animation: $animationName;
  animation: $animationName;
}


//key frames 兼容
@mixin keyframes($animationName) {
  @-webkit-keyframes #{$animationName} {
    @content;
  }
  @-moz-keyframes #{$animationName} {
    @content;
  }
  @-o-keyframes #{$animationName} {
    @content;
  }

  @-ms-keyframes #{$animationName} {
    @content;
  }

  @keyframes #{$animationName} {
    @content;
  }
}

//animate mode 兼容
@mixin  animation-mode($mode){
  -webkit-animation-fill-mode: $mode !important;
  -moz-animation-fill-mode: $mode !important;
  -ms-animation-fill-mode: $mode !important;
  animation-fill-mode: $mode !important;
}

正文

栗子 ： 我们有一个盒子,我希望它能够平移一段距离,然后旋转,缩放,渐隐掉.

逗号流(comma)

-webkit-animation :
      slideRight 1s ease 0s both,
      rotate360 1s linear  0.8s forwards,
      lessen 1s ease  1.8s forwards,
      fadeOut 1s ease  2.8s forwards;

借助animation 逗号分隔的特性来实现.这种写法非常独特的优势在与

  • 代码可读性强
  • 定义好的keyframes动画可以被复用,
  • 保你分分钟内搞定一串动画

理想很美好,现实却是残酷的,运行上面的代码,我们发现动画并不是我们想象中的那样,只有slideRight能正常执行完成.

问题:

  • slideRight 使用的是 -webkit-transform : translate(200px);
  • rotate360 使用的是 -webkit-transform : rotate(360deg);
  • lessen使用的是 -webkit-transform : scale(0.5);

当后一个动画的执行的时候 会覆盖掉前一个动画的transform.
我们后一个动画执行的时候 需要带上前一个动画的结束帧transform

如下解:


@include keyframes (rotate360){
  0%{
    -webkit-transform : translate(200px) rotate(0deg);
  }

  100%{
    -webkit-transform : translate(200px) rotate(360deg);
  }
标签流(label)

此法是为了解上述描述的弊端, 通过嵌套标签来实现动画

HTML

         
 <div class="translate  ib animate">
                <div class="rotate ib animate">
                    <div class="lessen ib animate">
                        <div class="fadeOut ib animate">
                             <div class="box"></div>
                        </div>
                     </div>
                </div>
  </div>

CSS

.translate {
  -webkit-animation: slideRight 1s ease 0s both;
  -ms-animation: slideRight 1s ease 0s both;
  -moz-animation: slideRight 1s ease 0s both;
  -o-animation: slideRight 1s ease 0s both;
  animation: slideRight 1s ease 0s both; }

.rotate {
  -webkit-animation: rotate360 1s linear 0.8s both;
  -ms-animation: rotate360 1s linear 0.8s both;
  -moz-animation: rotate360 1s linear 0.8s both;
  -o-animation: rotate360 1s linear 0.8s both;
  animation: rotate360 1s linear 0.8s both; }

.lessen {
  -webkit-animation: lessen 1s ease 1.8s both;
  -ms-animation: lessen 1s ease 1.8s both;
  -moz-animation: lessen 1s ease 1.8s both;
  -o-animation: lessen 1s ease 1.8s both;
  animation: lessen 1s ease 1.8s both; }

.fadeOut {
  -webkit-animation: fadeOut 1s ease 2.8s both;
  -ms-animation: fadeOut 1s ease 2.8s both;
  -moz-animation: fadeOut 1s ease 2.8s both;
  -o-animation: fadeOut 1s ease 2.8s both;
  animation: fadeOut 1s ease 2.8s both; }   
  
  .ib{
  display: inline-block;
}
.animate{
  -webkit-animation-play-state:paused !important;
  animation-play-state:paused !important;
}
.active .animate {
  -webkit-animation-play-state:running !important;
  animation-play-state:running !important;
}

keyframes

这里为了便于显示贴了sass的代码

@include keyframes(lessen){
  0%{
    -webkit-transform : scale(1);
  }

  100%{
    -webkit-transform : scale(0.5);
  }
}

@include keyframes(fadeOut){
  0%{
    opacity: 1;
  }

  100%{
    opacity: 0;
  }
}


@include keyframes (rotate360){
  0%{
    -webkit-transform : rotate(0deg);
  }

  100%{
    -webkit-transform : rotate(360deg);
  }
}


@include keyframes (slideRight){

  0%{
    -webkit-transform : translate(0);
  }

  100%{
    -webkit-transform : translate(200px);
  }
}

动画执行的顺序是按照 标签的顺序来定的.
从translate 到 rotate 到 lessen 到 fadeOut. 比较完美,
但要注意动画的执行顺序和标签结构顺序要一致 !important

  • 好处不用说,动画可复用.
  • 结构清晰
  • 复杂动画导致dom结构过深
PS : 使用标签流制作的时候 如果元素绝对定位的属性 请放在最外层标签上面

标签流的适用场景 适合简单轻快的动画

keyframes流

复杂型动画 这类动画基本不需要复用

@-webkit-keyframes kfc-ani {
  0% {
    -webkit-transform: translate(0px) rotate(0deg) scale(1);
    transform: translate(0px) rotate(0deg) scale(1);
    -moz-transform: translate(0px) rotate(0deg) scale(1);
    -ms-transform: translate(0px) rotate(0deg) scale(1); }
  33.33333% {
    -webkit-transform: translate(200px) rotate(0deg) scale(1);
    transform: translate(200px) rotate(0deg) scale(1);
    -moz-transform: translate(200px) rotate(0deg) scale(1);
    -ms-transform: translate(200px) rotate(0deg) scale(1); }
  66.66667% {
    -webkit-transform: translate(200px) rotate(360deg) scale(1);
    transform: translate(200px) rotate(360deg) scale(1);
    -moz-transform: translate(200px) rotate(360deg) scale(1);
    -ms-transform: translate(200px) rotate(360deg) scale(1); }
  100.0% {
    -webkit-transform: translate(200px) rotate(360deg) scale(0.5);
    transform: translate(200px) rotate(360deg) scale(0.5);
    -moz-transform: translate(200px) rotate(360deg) scale(0.5);
    -ms-transform: translate(200px) rotate(360deg) scale(0.5); }
}

这代码是否够酸爽,以上都是由css预处理工具生成. 借助sass我们可以尽情的去使用这张王牌.

sass来执行

$keys :
(name : transform,value : translate(0px) rotate(0deg)  scale(1),dur : 0s),
(name : transform,value : translate(200px) rotate(0deg)  scale(1),dur : 1s),
(name : transform,value : translate(200px) rotate(360deg) scale(1),dur : 1s),
(name : transform,value : translate(200px) rotate(360deg) scale(0.5),dur : 1s);

.kfc-ani{
  -webkit-animation : kfc-ani 4s ease 0s both;
}

@include kfc($keys,kfc-ani);

keyframes 流非常适合复杂的动画,它不具备 复用型,写法也够粗暴

  • 复杂动画王牌
  • 终极手段
  • 复用差 一次性frames

复杂动画的王牌

3种流派 各有所长,我们在实际项目中需要灵活运用;

  1. 使用标签流完成 可复用的动画
  2. 制作单一复杂动画的时候,请选择王牌keyframes
  3. 适当使用逗号流也有奇效

实际项目案例

知了是一款k12的轻社交产品
http://imzhiliao.com

weixin_33774883
关注
css 抽屉动画,纯CSS抽屉
weixin_33127399的博客
08-03 2434
css* {box-sizing: border-box;}body {align-items: center;background-color: #f9bf3b;display: flex;justify-content: center;min-height: 100vh;}:root {--height: 300;--width: 200;--depth: 150;--drawerSize: ...
html5 css3城市场景动画.zip
07-04
html5 css3城市场景动画是一款包含了白天到夜晚的渐变动画以及太阳、云朵、气球等动画效果；页面的视觉效果采用了插画的设计风格。 html5 css3城市场景动画演示图：
手写CSS3动画—爱心i love you
柠夏
02-07 523
HTML部分： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>傻逼 没有下次了</title> <!-- 引用CSS样式 --> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <body&gt
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）
热门推荐
u014063717的博客
03-17 4万+
两个场景（即两个div视图）切换的时候，如果想添加个过渡动画，除了可以使用js来实现，还可以通过CSS3的animation属性来实现。 （注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。）下面做了个过渡动画汇总，包含常见的动画效果，效果图如下： 点击此处查看运行效果。 代码如下：<!DOCTYPE html> <html> <head> <m
动画场景页面css3+html5
07-28
移动端动画场景应用，运用css3+html5制作出移动滚屏动画场景。内附源码文件
纯CSS3制作卡通场景汽车动画效果
weixin_30611509的博客
08-13 256
前言 今天分享一下我昨晚做的CSS3动画效果——卡通场景汽车动画。在接触CSS3动画之前，我之前实现一些简单的动画效果都是使用flash完成的。但是自从CSS3横空出世，在移动端对CSS3动画的运用越来越多。今天这个分享是PC端的案例，因为我做的是大场景来的，起因还是我无意间看到一张卡通图片。于是我突发灵感，就趁热打铁使用CSS3动画把它按照自己的想法实现了出来。接下来，就让我们一起进入这个好玩...
60余种css基础+css3动画+canvas+svg
最新发布
05-10
分享工作学习过程中遇见的有趣的css：css基础+css3动画+canvas+svg等 1.3d翻转和蒙版展示 2.CSS3和SVG实现的圆环菜单动画 3.css风车 4.css实现右上角标签条 5.百分比水球 6.大屏随机抽奖 7.纯css气泡背景 8.实现...
纯css3手写轮播
12-26
在IT领域，CSS3是一种强大的样式表语言，用于定义网页的布局、颜色、字体等视觉效果。本项目名为“纯css3手写轮播”，它着重于利用CSS3的特性来实现一个无JavaScript的轮播效果。然而，值得注意的是，这个实现存在...
CSS3手写笔记.md
04-14
看黑马视频里面的前端css3笔记，里面主要是讲课老师在课堂上手写的笔记，非常详细，供大家学习，一起交流学习
前端纯手写表白神器圣诞树<JS+HTML+CSS3>
12-12
动画圣诞树，表白神器，使用canvas动态画出圣诞树，简洁明了，容易看懂，可以自定义祝福语，也可以自己调整，画面清晰，风格明显。
css情景动画,CSS3 白天/黑夜场景轮回动画
weixin_39678531的博客
08-04 409
CSS语言：CSSSCSS确定html {height: 100%;}body {overflow: hidden;-webkit-animation: dn 10s;-webkit-animation-iteration-count: infinite;-webkit-animation-timing-function: linear;animation: dn 10s;animation-it...
css 入场动画_HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）...
weixin_39709367的博客
12-19 1380
1 2 3 4 5 HTML5-页面切换动画6 7 8 9 10 #viewsWrapper{11 top:0px;12 left:0px;13 width:300px;14 height:200px;15 position:relative;16 overflow:hidden;17 }1819 #view1{20 background:#dddd00;21 ...
CSS3 之高级动画（3）风速切换场景动画
weixin_30470643的博客
03-27 161
参看：CSS3风速切换场景动画 简单优化： 1. 去除boostrap.min.css样式 2.去除jquery操作DOM，改用HTML5新特性操作DOM let on_off = document.querySelector('#switch') let body = document.querySelector('body') on_off.oncl...
css3各种动画效果合集（一）
qq_53541336的博客
09-19 940
效果展示。
css3动画：animation城市动画
aaa小二
06-15 1160
animation城市动画
CSS3动画详解(结合实例)
weixin_30699463的博客
08-03 689
一、使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时，浏览器会不停的执行重排（reflow）和重绘（repaint） 可以避免占用JS主线程 这边就不细说这两者具体的低优缺点。一般做2D动画的话,可以使用CSS3的transition或animation 二、CSS3动画animation属性(可直接跳转三、实例) 简写: //模板 an...
ModernBoxes: 创新的CSS3动画库，赋予网页动感新生命
gitblog_00087的博客
04-20 324
ModernBoxes: 创新的CSS3动画库，赋予网页动感新生命 项目地址:https://gitcode.com/hui3215/ModernBoxes ModernBoxes 是一个基于CSS3的开源动画库，专注于为网页元素提供一系列现代、优雅且高度可定制的动画效果。开发者可以利用这个库轻松地为网站增添互动性和视觉吸引力，提升用户体验。 技术解析 ModernBoxes 使用纯CSS3语法编...
CSS3动画详细教程 | 理论 + 实例部分
前端小白的学习分享小世界
03-31 1702
CSS3动画详细教程系列 | 从理论+实例方面入手和分析，从0开始了解并熟悉CSS3动画属性
好用的css3特性-动画和3d变换
开心学前端 : )
04-26 220
上一篇文章总结了过渡和2D变化，这一篇来总结一下动画和3D变换，动画可用的场景也很多，比如在加载的页面的时候，可以放置一个gif图，也可以自定义小动画来缓解用户等待的焦虑感，比如以下三个小圆圈转圈圈的动画。 想要完成一个动画的效果，首先要知道定义的语法 使用animation来实现动画，@keyframes来定义元素的运动规律 (1) animation-name: 动画的名称，即@keyframes定义的动画名字（必写） (2) animation-duration: 动画的执行时间，一个动画
CSS3手写笔记：打造专业网页美容师
本资源是一份详细的CSS3手写笔记，旨在帮助前端开发者深入理解并掌握CSS3的核心概念和技能。笔记由黑马视频中的课程讲解整理而成，内容涵盖了广泛的CSS3知识点，包括但不限于： 1. **课程目标**： - 学习CSS选择器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值