css3实现动画的三种方式


Posted in HTML / CSS onAugust 24, 2020

这是一个考验面试者对css的基础知识。

css 实现动画主要有3种方式

第一种是: transition 实现渐变动画

第二种是: transform 转变动画

第三种是: animation 实现自定义动画

下面具体讲一下3种动画的实现方式。

transition渐变动画

我们先看一下 transition 的属性:

  • property:填写需要变化的css属性如:width,line-height,font-size,color等,所有作用与dom样式的属性;
  • duration:完成过渡效果需要的时间单位(s或者ms)
  • timing-function:完成效果的速度曲线(linear,ease,ease-in,ease-out等等)
     

timing-function具体的值可以看下面的表格:

描述
linear 匀速(等于 cubic-bezier(0,0,1,1))
ease 从慢到快再到慢(cubic-bezier(0.25,0.1,0.25,1))
ease-in 慢慢变快(等于 cubic-bezier(0.42,0,1,1))
ease-out 慢慢变慢(等于 cubic-bezier(0,0,0.58,1))
ease-in-out 先变快再到慢(等于 cubic-bezier(0.42,0,0.58,1)),渐显渐隐效果
cubic-bezier( n , n , n , n ) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值
  • delay: 动画效果的延迟触发时间(单位ms或者s)

下面我们看一个完整的例子:

<div class="base"></div>
.base {
            width: 100px;
            height: 100px;
            display: inline-block;
            background-color: #0EA9FF;
            border-width: 5px;
            border-style: solid;
            border-color: #5daf34;
            transition-property: width,height,background-color,border-width;
            transition-duration: 2s;
            transition-timing-function: ease-in;
            transition-delay: 500ms;
        /*简写*/
        /*transition: all 2s ease-in 500ms;*/
            &:hover {
                width: 200px;
                height: 200px;
                background-color: #5daf34;
                border-width: 10px;
                border-color: #3a8ee6;
            }
        }

运行效果:

css3实现动画的三种方式

可以看到,鼠标移上去的时候,动画延迟0.5s开始,并且由于 border-color 没有设置到 transition-property 里面,所以是没有渐变动画的。

transform转变动画

transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作.一般是配合transition的属性一起使用。

  1. none:定义不进行任何转换,一般用于注册掉该转换。
  2. transform-functions:定义要进行转换的类型函数。主要有:

2.1 旋转(rotate):主要分为2D旋转和3D旋转。rotate(angle),2D 旋转,参数为角度,如45deg;rotate(x,y,z,angle),3D旋转,围绕原地到(x,y,z)的直线进行3D旋转;rotateX(angle),沿着X轴进行3D旋转;rotateY(angle);rotateZ(angle);

2.2 缩放(scale):一般用于元素的大小收缩设定。主要类型同上,有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z),其中x、y、z为收缩比例。

2.3 倾斜(skew):主要用于对元素的样式倾斜。skew(x-angle, y-angle),沿着x和y轴的2D倾斜转换;skewX(angle),沿着x轴的2D倾斜转换;skew(angle),沿着y轴的2D倾斜转换。

2.4 移动(translate):主要用于将元素移动。translate(x, y),定义向x和y轴移动的像素点;translate(x, y, z),定义像x、y、z轴移动的像素点;translateX(x);translateY(y);translateZ(z)。

<h5>transition配合transform一起使用</h5>
<div class="base base2"></div>
.base2{
          transform:none;
          transition-property: transform;
          &:hover {
              transform:scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
          }
      }

运行效果:

css3实现动画的三种方式

可以看到盒子发生了旋转,倾斜,平移,放大。

animation自定义动画

为了实现更灵活的动画效果,css3还提供了自定义动画的功能。

(1) name:需要绑定到选择器的keyframe名称。

(2) duration:完成该动画需要花费的时间,秒或毫秒。

(3) timing-function:跟transition-linear一样。

(4) delay:设置动画在开始之前的延迟。

(5) iteration-count:设置动画执行的次数,infinite为无限次循环。

(6) direction:是否轮询反向播放动画。normal,默认值,动画应该正常播放;alternate,动画应该轮流反向播放。

<h5 class="title">animate自定义动画</h5>
<div class="base base3"></div>
.base3 {
          border-radius: 50%;
          transform:none;
          position: relative;
          width: 100px;
          height: 100px;
          background: linear-gradient(
                  35deg,
                  #ccffff,
                  #ffcccc
          );
          &:hover {
              animation-name: bounce;
              animation-duration: 3s;
              animation-iteration-count: infinite;
          }
      }
      @keyframes bounce{
          0% {
              top: 0px;
          }
          50% {
              top: 249px;
              width: 130px;
              height: 70px;
          }
          100% {
              top: 0px;
          }
      }

运行效果:

css3实现动画的三种方式

可以看到,自定义动画能实现更灵活的动画效果,包括了第一种和第二种动画的所有功能,而且属性也更全面。

以上代码可以在线体验:地址

源码地址

以上就是css3实现动画的三种方式的详细内容,更多关于css3实现动画的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
详解HTML5 录音的踩坑之旅
Dec 26 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
前后端结合实现amazeUI分页效果
Aug 21 HTML / CSS
html5+实现plus.io进行拍照和图片等获取
Jun 01 HTML / CSS
详解flex:1什么意思
Jul 23 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 #HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 #HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 #HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 #HTML / CSS
纯CSS3实现鼠标滑过按钮动画第二节
Jul 16 #HTML / CSS
css3实现小箭头各种图形效果
Jul 08 #HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
Jun 22 #HTML / CSS
You might like
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
PHP解析目录路径的3个函数总结
2014/11/18 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
2014/05/13 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
2016/11/24 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
node后端服务保活的实现
2019/11/10 Javascript
Python实现网站文件的全备份和差异备份
2014/11/30 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
解决pip install psycopg2出错问题
2020/07/09 Python
如何开发安全的AJAX应用
2014/03/26 面试题
毕业生就业自荐信
2013/12/04 职场文书
高中毕业自我鉴定
2013/12/16 职场文书
仓库管理制度
2014/01/21 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
银行员工考核评语
2014/12/31 职场文书
领导参观欢迎词
2015/01/26 职场文书
劳动仲裁代理词范文
2015/05/25 职场文书
销售人员管理制度
2015/08/06 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
react 项目中引入图片的几种方式
2021/06/02 Javascript