当前位置：Gxlcms > css > Css3新特性应用之过渡与动画

Css3新特性应用之过渡与动画

时间：2021-07-01 10:21:17 帮助过：79人阅读

一、缓动效果

  • 学习和利用贝塞尔曲线，默认支持ease，ease-in，ease-out,ease-in-out和linear等

  • 还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点

  • Css中只支持一条贝塞尔曲的运动，不能连续多段

  • 对cubic-beizer中控制锚点的水平坐标与垂直坐标互换，就可以得到任何调整函数的反向版本 cubic-beizer(.1,.25,1,.25)是ease的反向调整函数

    • 水平坐标只能在0~1的范围内，因为水平坐标表示的是时间

    • 垂直坐标可以超过此范围，表示为运动距离

  • 示例代码

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <style>
  5.         @keyframes bounce{
  6.             60%, 80%, to{
  7.                 transform: translateY(350px);
  8.                 animation-timing-function: ease-out; /*加速*/
  9.             }
  10.             70%{ transform: translateY(250px); }
  11.             90%{ transform: translateY(300px) }
  12.         }
  13.         .ball{
  14.             display: inline-block;
  15.             animation: bounce 3s ease-in; /*减速*/
  16.             width: 20px;
  17.             height: 20px;
  18.             border-radius: 50%;
  19.             background: red;
  20.         }
  21.         @keyframes bounceEase{
  22.             60%, 80%, to{
  23.                 transform: translateY(400px);
  24.                 animation-timing-function: ease;
  25.             }
  26.             70% { transform: translateY(300); }
  27.             90% { transform: translateY(350px); }
  28.         }
  29.         .ball02{
  30.             display: inline-block;
  31.             animation: bounceEase 3s cubic-bezier(.1,.25,1,.25);/*反向ease*/
  32.             margin-left: 60px;
  33.             width: 20px;
  34.             height: 20px;
  35.             border-radius: 50%;
  36.             background: gray;
  37.         }
  38.     </style></head><body>
  39.     <p class="ball">
  40.     </p>
  41.     <p class="ball02"></p></body>

Css3新特性应用之过渡与动画

  • 利用过渡(transition)实现

  • 但需要注意transition-property默认值为all，所有可以过渡的属性都会被过滤

  • 示例代码:

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <style> 
  5.         input:not(:focus) + .callout{
  6.             transform: scale(0); 
  7.             transition-duration: .25s; /*覆盖默认的.5s时间*/ 
  8.             transition-property: transform; /*只过渡transform属性，不过滤背景等其他属性*/
  9.         } 
  10.         .callout{ 
  11.             transition: .5s cubic-bezier(.25,.1,.3,1.5); /*光标
输出input时，有动画*/ transition-property: transform;/*只过渡transform属性，不过滤背景等其他属性*/ } input{ display: block; } .callout{ background: #fed; position: absolute; max-width: 14em; padding: .6em, .8em; } </style></head><body> <label> Your name: <input type="text" id="username" /> <span class="callout">Only letters,number,underscores and hyphens allowed</span> </label></body>

Css3新特性应用之过渡与动画

二、逐帧动画

  • animation-timing-function中的steps函数，主要用他实现帧动画，他是一个阶跃函数，共两个参数

    • timing-function是作用于每两个关键帧之间，而不是整个动画过程

    • 参数一：一个数字，代表时间函数中的间隔数量（必须为正数）

    • 参数二：接受start和end两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认end，step-start和step-end分别是steps(1,start)和steps(1,end)的简写

  • 示例代码：

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <style>
  5.         @keyframes loader{
  6.             to{ background-position: -128px 0; }
  7.         }
  8.         .wrap{
  9.             background: url("../img/frameAnimate.png") no-repeat;
  10.             width: 32px;
  11.             height: 50px; 
  12.             background-position: 0px 0px;
  13.             animation: loader 1s infinite steps(4);
  14.         }
  15.     </style></head><body>
  16.     <p class="wrap"></p></body>

三、闪烁效果

实现两种闪烁效果，一是平滑闪烁，另一种是帧闪烁（更接近于现实）

  • 平滑闪烁

主要是利用animation-iteration-count和animation-direction两个属性实现。
1.animation-iteration-count：表示动画的执行次数
2.animation-direction：表示动画是否应该轮流反向播放动画，如果值为alternate时，animation-iteration-count必须是一个偶数，因为是奇数正常播放，偶数反向播放

  • 代码如下：

  1. <style>
  2.     @keyframes blink-smooth{
  3.         to{ color: transparent; }
  4.     }
  5.     .wrap{
  6.         animation: 1s blink-smooth;
  7.         animation-iteration-count: 6;
  8.         animation-direction: alternate;
  9.     }</style><p class="wrap">我是平滑的显示和隐藏三次</p>

  • 帧闪烁

利用animation-timing-function属性的steps实现，因steps指定两个关键帧之间分成几个片段执行动画
1.animation-timing-function: steps(1)，然后配合上动画在50%实现一个透明即可

  • 代码如下：

  1. <style>
  2.     @keyframes blink-smooth02{
  3.         50% { color: transparent; }
  4.     }
  5.     .wrap02{
  6.         animation: 1s blink-smooth02;
  7.         animation-iteration-count: 3;
  8.         animation-timing-function: steps(1);
  9.     }</style><p class="wrap">我是逐帧的显示和隐藏三次</p>

四、打字效果（只支持单行英文）

需要利用用下特性：
1.等宽字体，然后加上ch这个单位，ch是表示'0'这个字符的宽度.
2.使用动画让元素宽度从0变到最大宽度。
3.利用steps(1)让每个关键帧的地方产生动画 代码如下：

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <style>
  5.         @keyframes typing {
  6.             from{ width: 0; }
  7.         }
  8.         @keyframes cart{
  9.             50%{ border-color: currentColor; } /*利用steps在关键帧位置发生动画实现*/
  10.         }
  11.         .wrap{
  12.             width: 14ch;
  13.             animation: typing 8s steps(14) , cart 1s steps(1) infinite;
  14.             white-space: nowrap;
  15.             overflow: hidden;
  16.             border-right:1px solid transparent;
  17.             font-family: Courier New, Courier, monospace;
  18.         }
  19.     </style></head><body>
  20.     <p class="wrap">Css is awesome</p></body>

五、状态平滑的动画

利用animation-play-state属性实现动画的暂停和播放功能，以及改变背景的定位。示例代码如下：

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <style>
  5.         @keyframes mic{
  6.             to{ background-position: 100% 0; }    
  7.         }
  8.         .wrap{
  9.             background: url("../img/cat.png");
  10.             background-repeat: no-repeat;
  11.             background-size: auto 100%;
  12.             width: 100px;
  13.             height: 200px;
  14.             animation: mic 5s linear infinite alternate; /*直线运动，永不停止，偶数反向运动*/
  15.             animation-play-state: paused;
  16.         }
  17.         .wrap:hover, .wrap:active{
  18.             animation-play-state: running;
  19.         }
  20.     </style></head><body>
  21.     <p class="wrap"></p></body>

Css3新特性应用之过渡与动画

六、沿环型路径平移的动画

这点很重要，transform中的变形函数（如：rotate，transflate等）都是会影响元素整个坐标系统。也就是说rotate旋转的时候是旋转的整个坐标系统。这是实现用一个元素沿环弄路径平移的基础。原理图如下：

Css3新特性应用之过渡与动画

  • 两个元素方案，transform-origin + rotate可以实现，但html结构需要两个元素，如下代码：

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <style>
  5.         @keyframes spin{
  6.             to{ transform: rotate(1turn); } /*顺时针旋转360*/
  7.         }
  8.         @keyframes spin-reverse{
  9.             from{ transform: rotate(1turn); } /*逆时针旋转360*/
  10.         }
  11.         .wrap{
  12.             width: 300px;
  13.             height: 300px;
  14.             background: yellow;
  15.             border-radius: 50%;
  16.             overflow: hidden;
  17.             padding: 20px; /*加大窗口的宽和高，利用背景从边框开始的原理，让运动图片与边框有一定的距离*/
  18.         }
  19.         .spin{
  20.             width: 30px;
  21.             height: 30px;
  22.             border-radius: 50%;
  23.             overflow: hidden;
  24.             margin: 0px auto; /*运行元素居中*/
  25.             animation: spin 5s infinite linear;
  26.             transform-origin: 50% 150px; /*定位变换的原点*/
  27.         }
  28.         .spin > img{
  29.             width: inherit;
  30.             height: inherit;
  31.             animation: spin-reverse 5s infinite linear;
  32.             --animation: inherit;
  33.             --animation-direction: reverse; /*由于动画会控制整个元素+元素内部的元素一起动画，所以内部的元素要反向动画*/
  34.         }
  35.     </style></head><body>
  36.     <p class="wrap">
  37.         <p class="spin">
  38.             <img src="../img/cat.png" alt="" />
  39.         </p>
  40.     </p></body>

说明：
1..spin的transform-origin: 50% 150px;是进行变换原点的定位；
2.由于需要实现spin环形运动，transform本质特性是元素+元素内部子元素都要随着变换，因此需要对img元素进行反向变形
3.实现两种反向变形的方式：A:写一个反向变形动画；B：继承父级的动画，用animation-direction指定位reverse进行反向。

  • 单个元素方案，利用translate和rotate（多次利用），html结构只有一层，代码如下：

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <title>Document</title>
  4.     <style>
  5.         /*反向旋转必须有，不然位置不对*/
  6.         @keyframes spinc{
  7.             from{
  8.                 transform: translate(50%, 150px)
  9.                             rotate(0turn)
  10.                             translate(-50%, -150px) 
  11.                             translate(50%, 50%)
  12.                             rotate(1turn)
  13.                             translate(-50%, -50%); /*前三个第一轮旋转，后三个第二轮旋转*/
  14.             }
  15.             to{
  16.                 transform: translate(50%, 150px)
  17.                             rotate(1turn)
  18.                             translate(-50%, -150px)
  19.                             translate(50%, 50%) 
  20.                             rotate(0turn)
  21.                             translate(-50%, -50%);
  22.             }
  23.         }
  24.         .wrap{
  25.             width: 300px;
  26.             height: 300px;
  27.             background: yellow;
  28.             border-radius: 50%;
  29.             overflow: hidden;
  30.             padding: 20px; /*加大窗口的宽和高，利用背景从边框开始的原理，让运动图片与边框有一定的距离*/
  31.         } 
  32.         .avatar{            
  33.             width: 30px;
  34.             height: 30px;
  35.             border-radius: 50%;
  36.             overflow: hidden;
  37.             margin: 0px auto; /*运行元素居中*/
  38.             display: block;   
  39.             animation: spinc 5s linear infinite; 
  40.         }
  41.     </style></head><body>
  42.     <p class="wrap"> 
  43.         <img src="../img/cat.png" alt="" class="avatar" /> 
  44.     </p></body>

说明：
1.一个img然后即要沿环型路径运动，本身又不能随着旋转，那么就需要两组位移和旋转
2.第一组位移 + 旋转，实现img元素沿环形路径运动

  1. translate(50%, 150px)
  2. rotate(0turn)
  3. translate(-50%, -150px)

3.第二组位移 + 旋转，实现img元素本身定位不动

  1. translate(50%, 50%)
  2. rotate(1turn)
  3. translate(-50%, -50%)

  • 两个元素方案主单个元素方案效果图如下：

Css3新特性应用之过渡与动画

更多Css3新特性应用之过渡与动画 相关文章请关注PHP中文网！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！