css3之animation、transform、transition

animation动画

动画使元素逐渐从一种样式变为另一种样式。使用 CSS 动画之前，需要首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。使用@keyframes 规则定义动画关键帧，动画将在特定时间逐渐从当前样式更改为新样式。

复制代码
<!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>
      @keyframes example {
        0% {
          background-color: red;
          left: 0px;
          top: 0px;
        }
        25% {
          background-color: yellow;
          left: 100px;
          top: 0px;
        }
        50% {
          background-color: blue;
          left: 100px;
          top: 100px;
        }
        75% {
          background-color: green;
          left: 0px;
          top: 100px;
        }
        100% {
          background-color: red;
          left: 0px;
          top: 0px;
        }
      }

      div {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: red;

        /* 使用动画 */
        animation-name: example;
        /* animation-duration 属性定义需要多长时间才能完成动画。 */
        animation-duration: 4s;
        /* animation-delay 属性规定动画开始的延迟时间 */
        animation-delay: 2s;
        /* animation-iteration-count 属性指定动画应运行的次数。infinite或者数字 */
        animation-iteration-count: infinite;
        /* animation-direction 属性指定是向前播放、向后播放还是交替播放动画。
        可选值： normal - 动画正常播放（向前）。默认值；
                reverse - 动画以反方向播放（向后）；
                alternate - 动画先向前播放，然后向后；
                alternate-reverse - 动画先向后播放，然后向前 */
        animation-direction: alternate;
        /* animation-timing-function 属性规定动画的速度曲线。
        可选值： ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）；
                linear - 规定从开始到结束的速度相同的动画；
                ease-in - 规定慢速开始的动画；
                ease-out - 规定慢速结束的动画；
                ease-in-out - 指定开始和结束较慢的动画；
                cubic-bezier(n,n,n,n) - 运行在三次贝塞尔函数中定义自己的值 */
        animation-timing-function: ease;
        /* animation-fill-mode 属性指定动画的填充模式,在不播放动画时（在开始之前，结束之后，或两者都结束时）
　　　　　　animation-fill-mode 属性规定目标元素的样式 
        可选值： none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
                forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
                backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
                both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。*/
        animation-fill-mode: backwards;
        /* 动画简写属性animation: name duration timing-function delay iteration-count direction; */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>
复制代码

 

transition过渡

CSS 过渡允许在给定的时间内平滑地改变属性值。

复制代码
<!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>
      div {
        width: 100px;
        height: 100px;
        position: relative;
        background-color: red;
      }
      .div1 {
        /* transition-property    规定过渡效果所针对的 CSS 属性的名称。 */
        transition-property: width;
        /* transition-duration    规定过渡效果要持续多少秒或毫秒。 */
        transition-duration: 2s;
        /* transition-timing-function    规定过渡效果的速度曲线。 
        可选值： ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
                linear - 规定从开始到结束具有相同速度的过渡效果
                ease-in -规定缓慢开始的过渡效果
                ease-out - 规定缓慢结束的过渡效果
                ease-in-out - 规定开始和结束较慢的过渡效果
                cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值*/
        transition-timing-function: linear;
        /* transition-delay    规定过渡效果的延迟（以秒计）。 */
        transition-delay: 1s;
      }
      .div2 {
        /* 简写属性transition: property duration timing-function delay; */
        transition: width 2s linear 1s;
      }
      div:hover {
        width: 300px;
      }
    </style>
  </head>
  <body>
    <div class="div1"></div>
    <div class="div2"></div>
  </body>
</html>
复制代码

transform 2D 转换

transform 移动、旋转、缩放和倾斜元素。

复制代码
<!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>
      .container {
        display: flex;
        border: 1px solid red;
        font-size: 8px;
      }
      .box {
        width: 75px;
        height: 75px;
        border: 1px solid orange;
        margin: 10px;
      }
      .translate {
        /* translate(dx,dy) 平移，从其当前位置移动元素 */
        transform: translate(10px, 10px);
      }
      .translateX {
        /* translateX(dx) 平移，从当前位置沿X轴方向移动元素 */
        transform: translateX(10px);
      }
      .translateY {
        /* translateY(dy) 平移，从当前位置沿Y轴方向移动元素 */
        transform: translateY(10px);
      }
      .rotate {
        /* rotate(deg) 旋转，根据给定的角度顺时针或逆时针旋转元素。 */
        transform: rotate(20deg);
      }
      .rotate1 {
        transform: rotate(20deg);
        /* transform-origin 属性允许改变被转换元素的位置。transform-origin: x-axis y-axis
        x-axis定义视图被置于 X 轴的何处。可能的值：left、center、right、length、%
        y-axis定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、% */
        transform-origin: left bottom;
      }
      .scale {
        /* scale(px,py) 缩放，根据给定的宽度和高度参数缩放元素 */
        transform: scale(0.75, 0.5);
      }
      .scaleX {
        /* scaleX(px) X轴方向上缩放，根据给定的宽度参数缩放元素 */
        transform: scaleX(1.5);
      }
      .scaleY {
        /* scaleY(py) Y轴方向上缩放，根据给定的高度参数缩放元素 */
        transform: scaleY(1.25);
      }
      .skew {
        /* skew(degX,degY) 沿X轴和Y轴方向上斜给定角度 */
        transform: skew(45deg, -30deg);
      }
      .skewX {
        /* skewX(deg) X轴方向上斜给定角度 */
        transform: skewX(30deg);
      }
      .skewY {
        /* skewY(deg) Y轴方向上斜给定角度 */
        transform: skewY(-30deg);
      }
      .matrix {
        /* 相当于translate(10px, 10px) */
        transform: matrix(1, 0, 0, 1, 10, 10);
      }
      .matrix1 {
        /* 相当于scale(0.75, 0.5) */
        transform: matrix(0.75, 0, 0, 0.5, 0, 0);
      }
    </style>
  </head>
  <body>
    <fieldset>
      <legend>translate平移</legend>
      <div class="container">
        <div class="box"></div>
        <div class="box translate">translate(10px, 10px)</div>
        <div class="box translateX">translateX(10px)</div>
        <div class="box translateY">translateY(10px)</div>
      </div>
    </fieldset>
    <fieldset>
      <legend>rotate旋转</legend>
      <div class="container">
        <div class="box"></div>
        <div class="box rotate">rotate(20deg)</div>
        <div class="box rotate1">rotate(20deg)</div>
      </div>
    </fieldset>
    <fieldset>
      <legend>scale缩放</legend>
      <div class="container">
        <div class="box"></div>
        <div class="box scale">scale(0.75, 0.5)</div>
        <div class="box scaleX">scaleX(1.5)</div>
        <div class="box scaleY">scaleY(1.25)</div>
      </div>
    </fieldset>
    <fieldset>
      <legend>skew倾斜</legend>
      <div class="container">
        <div class="box"></div>
        <div class="box skew">skew(45deg, -30deg)</div>
        <div class="box skewX">skewX(30deg)</div>
        <div class="box skewY">skewY(-30deg)</div>
      </div>
    </fieldset>
    <fieldset>
      <legend>martrix</legend>
      <div class="container">
        <div class="box"></div>
        <div class="box matrix">matrix</div>
        <div class="box translate">translate</div>
        <div class="box matrix1">matrix</div>
        <div class="box scale">scale</div>
      </div>
    </fieldset>
  </body>
</html>
复制代码

 

 

posted @   carol2014  阅读(38)  评论(0)  编辑  收藏  举报
相关博文：
· three.js之动画Animation
· svg基础及示例
· css3过渡,变换,动画
· CSS宝典⑥-CSS动画 transition/animation
· CSS3新特性——新增选择器，2D/3D转换，动画
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
点击右上角即可分享
微信分享提示
AI IDE Trae