Advertisement

一、动画 - 过渡效果transition

阅读量：

内容目录：

  • 过渡动画；
  • 过渡动画的属性；

一、过渡动画

复制代码 
     过渡（transition）作用：
       - 通过过渡可以指定一个属性发生变化时的切换方式
       - 通过过渡可以创建一些非常好的效果，提升用户的体验

为了更好地理解过渡动画的作用与应用范围，请特别强调它完全由css技术完成而不依赖任何JavaScript代码。

复制代码 
    <!DOCTYPE html>
    <html lang="en">
      <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 500px;
        height: 500px;
        background-color: silver;
        /* 开启bfc,防止重叠 */
        overflow: hidden;
      }
    
      .box1 div {
        width: 100px;
        height: 100px;
        /* 特别注意，当这里设置margin的时候，因为可能上边距重贴，导致无法正常下移动
      所以必须在box1上，写 overflow: hidden;*/
        margin-bottom: 100px;
      }
      .box2 {
        background-color: green;
      }
    </style>
      </head>
      <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
      </body>
    </html>
请添加图片描述

需求：
当我鼠标移动到box1的时候，我要改变box2的宽高为200.

实现：

复制代码 
    /* 根据后代元素选择器： */
      .box1:hover .box2{
    width: 200px;
    height: 200px;
      }

写上后，发现宽高会变大，但是效果是box2突然变大。

优化：

复制代码 
      .box2 {
        background-color: green;
        /* box2的宽高，都在0.3s内过渡中变大 */
        transition: all .3s; 
      }
    或者
    .box2 {
        background-color: green;
        /* 仅仅只让hegiht 高度属性在0.3s缓慢变大道200px */
        transition: height .3s;
    
      }

二、过渡动画属性

1.transition-property - 指定要执行的过渡的属性;

  • 多个属性之间通过逗号分隔；
    • 如果所有属性均需要进行关联操作，则应使用all关键字；
    • 绝大多数属性均支持过渡效果
复制代码 
     .box2 {
        background-color: green;
         /* 这个表示所有属性都过渡变化
        transition-property:all; */
         /* 这个表示，只是width进行过渡变化
        transition-property: width;
         */
         
         /* 宽，高，属性都进行过渡变化 */
        transition-property: width, height;
         
        
      }

2.transition-duration - 指定过渡效果的时间

例如，在这种情况下（即当鼠标悬停在box1上时），box2会缓慢而均匀地扩大（长宽均有所变化），并呈现橘黄色。

复制代码 
       .box2 {
        background-color: green;
        /* 这个表示所有属性都过渡变化*/
        transition-property:all; 
        /* 指定过渡效果的时间 ，时间单位s ， ms; 1s = 1000ms*/
        transition-duration: 2s;
      }
    	或者 - /* 过渡时间还可以这样用 */
       .box2 {
        background-color: green;
        /* 可以针对不同的属性，指定对应的时间 */
        transition-property: height, width;
        transition-duration: 100ms , 2s;
      }
    
       
      /* 根据后代元素选择器 ：太突然变大 */
      .box1:hover .box2{
        width: 200px;
        height: 200px;
        background-color: orange;
      }

提示

提示

提示

比如我想为box2设置 margin-left 的过渡效果。最初从最大值（400px）开始逐步降到最小值（0）。此时这些数值均为有效范围内的数值，在这个过程中会自然过渡。

复制代码 
     .box2 {
        margin-left:400px;
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
      }
    
      .box1:hover .box2{
        margin-left: 0;
      }

下面这种做法存在缺陷：
由于浏览器无法得知如何让auto变为0的状态变化, 这种操作会导致效果直接跳转至0点

复制代码 
       .box2 {
        /* 当我们把这个换成auto, auto就不是有效数值，
        过渡效果就无法实现 */
        margin-left:auto;
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
      }
    
      .box1:hover .box2{
        margin-left: 0;
      }

3.transition-timing- function - 过渡的时序函数

可选参数如下所述：
- "ease"---------默认参数
- 渐增速度
- 匀速运动状态
- 加速运动阶段
- 减速运动阶段
- 先增速加快后又减速阶段
- cubic-bezier()——贝塞尔曲线指定时间序列函数
- steps()——逐级切换过渡效果
- 分别设置两个参数：
- "end"——在时间结束时刻切换过渡效果（默认）
- "start"——在时间起始时刻切换过渡效果

需求：我们需要实现一个过渡动画效果。例如，可以让box2和box3的margin-left从零逐渐变化到400px，并具体说明这一过渡是如何实现的。其中，可以通过恒定速度实现这一过程；也可以通过加速度的方式来优化这一过程。这需要依赖该属性来进行控制设置。

实现：

  1. 先来设置一个没有加这个属性的效果，发现box2,box3过渡效果是一样的。
复制代码 
    <!DOCTYPE html>
    <html lang="en">
      <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        width: 500px;
        height: 500px;
        background-color: silver;
        /* 开启bfc,防止重叠 */
        overflow: hidden;
      }
    
      .box1 div {
        width: 100px;
        height: 100px;
        margin-bottom: 100px;
        margin-left: 0;
      }
      
      .box2 {
      
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
    
      }
      .box3{
        background-color: orange;
        transition-property: all;
        transition-duration: 2s;
      }
      /* 表示box1下的所有元素都移动，即box2,box3 */
      .box1:hover div{
        margin-left: 400px;
      }
      
    </style>
      </head>
      <body>
    <div class="box1">
      <div class="box2"></div>
      <div class="box3"></div>
    </div>
      </body>
    </html>

2.接下来对box2进行加工

复制代码 
       .box2 {
      
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
         /* 过渡时序 
         ease:默认值，慢速开始，先加速，再减速， 这里发现box2和box3 都是一样的匀速运动。效果上没有区别
         */
        transition-timing-function: ease;
    
      }

试试第换下面的属性值：

复制代码 
      .box2 {
      
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
         /* 过渡时序 
         linear 匀速， 此时对比box2,box3,会发现，box2一直匀速，box3 因为没有单独设置
          transition-timing-function， 他默认就是ease 先加速，在减速，所以很容易
          发现他们出现前后速度不一的运动
         */
        transition-timing-function: linear;
    
      }

3.通过cubic-bezier()–贝塞尔曲线来指定时序函数

无需自行设计, 可以直接访问网络 https://cubic-bezier.com （用于设置该函数内的参数值, 请关注该函数参数框中左侧下方标记的#符号后的数值）

在这里插入图片描述
复制代码 
      .box2 {
      
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
         /* 过渡时序 
         如果用贝塞尔曲线表示匀速
         */
        /* transition-timing-function: linear; */
        transition-timing-function:cubic-bezier(0,0,1,1);
    
      }

在本处的具体说明中，请注意以下几点：在本段讨论的手柄设置中，默认情况下（0,0）表示的是默认的手柄位置坐标点；而（1,1）则对应的是另一个参考点的位置坐标。通过这两个关键点的位置参数设置即可决定或定义该贝塞尔曲线的基本形状。

我们可以利用这两个控制手柄来定制贝塞尔曲线的高度，在其中曲线的高度决定了加速与减速的比例。例如，在这里进行操作后（具体来说是通过移动手柄），我们可以直接查看最顶端对应的数值，并将其复制下来。

请添加图片描述
复制代码 
       .box2 {
      
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
         /* 过渡时序 
         自己设计的贝塞尔曲线
         */
     
        transition-timing-function:cubic-bezier(.24,.95,.82,-0.88);
    
      }

步骤（steps）实现分步过渡效果。当未启用此功能时，默认状态下利用 margin-left 参数进行平移操作，并呈现一种流畅连续的效果。启用该参数后观察到其根据数值逐步移动的方式呈现间歇性运动轨迹而非连续性平移过程。

复制代码 
       .box2 {
      
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
         /* 过渡时序 
         表示box2 从 margin-left: 0 过渡 到400 在2s内分3步，走到位
         */
     
        transition-timing-function:steps(3);
    
      }

该函数可按步骤逐步实现过渡效果。
可以指定一个参数：

  • end, 该参数设为默认时，在结束时间点触发过渡效果；
  • start, 该参数在开始时间点触发默认的过渡效果。
复制代码 
      .box2 {
      
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
         /* 过渡时序 
        steps 其实他里面其实是可以传第二个参数，我们没有写，他其实默认是end.
    
        比如这里是2步，也就是整个动画分成1s 1s, 然后box2 在每个1s 是他的开始，还是
        结束的时候开始运动，这里是end, 就表示1s结尾，在继续运动，往右走。
         */
     
        /* transition-timing-function:steps(2,end); */
    
        /* 如果我们改成start, 就表示每个的1s 开始就动画，你会发现运行后，里面就开始运动 */
        transition-timing-function:steps(2,start);
      }
  1. transition-delay 延迟效果
复制代码 
     .box2 {
      
        background-color: green;
        transition-property:all; 
        transition-duration: 2s;
        /* 过渡效果的延迟，等待相应的时间后再执行 */
        transition-delay:2s;
      }
  1. 这些多的属性里有多个参数吗？transition 可以同时配置所有与过渡相关的属性。
    仅需满足一个条件：如果要设置延迟，请确保先指定持续时间事件（第一个），再指定延迟事件（第二个）。其他属性无特定顺序要求
复制代码 
     .box2 {
      
        background-color: green;
        /* transition-property:all; 
        transition-duration: 2s;
        transition-delay:1s; */
    
        /* 
        一次性就设置完成
       */
        transition:2s margin-left 1s cubic-bezier(.25,.1,.25,1);
      }

全部评论 (0)

还没有任何评论哟~

相关文章推荐

一、动画 - 过渡效果transition

内容目录： 过渡动画； 过渡动画的属性； 一、过渡动画 过渡（transition）作用： 通过过渡可以指定一个属性发生变化时的切换方式 通过过渡可以创建一些非常好的效果，提升用户的体验 现在我们通过...

取消hover效果_CSS3 transition过渡动画效果

本章主要探讨HTML5中CSS3的过渡效果，通过这个功能可以不借助JavaScript来实现简单的用户交互功能。 一．过渡简介 过渡效果一般是通过一些简单的CSS动作触发平滑过渡功能，比如：:hove...

vue.js中的过渡动画效果（transition+animate.css+velocity.js）

对于“数据优先”的Vue来说，没有了dom的操作，过渡效果该如何实现？ 其实，vue也不是完全失去了对dom的操作，仍然可以通过比如refs获取对应的dom元素 先看一个小demo： <!DOCTYP...

transition动画效果html,CSS3第十课：transition过渡动画(内附神器！)

在十年前，我用flash做动画的时候，总结了一下flash的运动规律，主要有形状、大小、位置、角度、颜色、透明度、加减速等变化。没想到移动端异军突起，似乎一夜之间，flash就没落了。

CSS3过渡效果 transition

1.过渡简介 过渡效果一般是通过一些简单的CSS动作触发平滑过渡功能，比如::hover、:focus、:active、:checked等。CSS3提供了transition属性来实现这个过渡功能，主...

动画过渡transition

动画过渡transition Transition是一个复合属性，包含一下几个子属性： Transitionproperty:指定过渡或动态模拟的CSS属性： Transitionduration:指...

vue-过渡效果（transition过渡组件）

借用animate.css添加类名 使用transition包裹过渡组件 动画： enteractiveclass=animatedxxxx类名进入 leaveactiveclass=animated...

2D缩放动画效果 transition过渡和transform:scale(x,y)

前 当鼠标置于盒子上时 <!DOCTYPEhtml <html <head <title2d动画缩放效果</title <styletype=text/css h1textshadow:5px5px6...

Android 过渡动画(Transition)

使用过渡动画为布局的变化添加动画效果场景过渡动画 为布局的变化添加动画效果大概需要以下几个流程： 1.为起始布局和结束布局个创建一个Scene场景对象。然而大部分情况下，我们不需要创建起始布局的Sce...

vue transition 过渡动画

transition vue允许我们在显示隐藏元素以及创建元素过程中，添加过渡效果 transition元素（组件）是由vue提供的，可以为内部的元素添加过渡效果 过程演示 venter：过渡的初始状...