CSS转换，过渡，动画的学习

Love The Way You Lie 2023-10-05 22:22 2阅读 0赞

### 一：转换 ###

CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

>  *  translate(50px,100px) 移动
>  *  rotate(30deg) 旋转
>  *  scale(2,2) 缩放
>  *  skew(30deg,20deg) 倾斜
>  *  matrix() 矩阵

<div class="main">
        <h2>一、transform:(2D转换)</h2>
        <h3>1.translate(移动,转变) 方法</h3>
        <div class="public translate">
        </div>
    
        <h3>2.rotate(旋转) 方法</h3>
        <div class="public rotate">
        </div>
    
        <h3>3.scale(缩放,改变大小) 方法</h3>
        <div class="public scale">
        </div>
    
        <h3>4.skew(倾斜) 方法</h3>
        <div class="public skew">
        </div>
    
        <h3>5.matrix() 方法</h3>
        <div class="public matrix">
        </div>
    </div>
    <div class="main">
        <h2>二、transform:(3D转换)</h2>
        <h3>1.rotateX(X轴旋转) 方法</h3>
        <div class="public rotateX">
            我向前后旋转
        </div>
    
        <h3>2.rotateY(Y轴旋转) 方法</h3>
        <div class="public rotateY">
            我向左右旋转
        </div>
        <h3>2.rotateY(Z轴旋转) 方法</h3>
        <div class="public rotateZ">
            我向上下旋转
        </div>
    </div>

.main {
                width: 800px;
                margin: auto;
                padding: 50px;
            }
    
            .public {
                width: 100px;
                height: 50px;
                border: 1px solid #000;
                background-color: greenyellow;
                border-radius: 8px;
            }
    
            .translate:hover {
                transform: translate(50px, 50px);
            }
            .rotate:hover {
                transform: rotate(45deg);
            }
            .scale:hover {
                transform: scale(2,2);
            }
            .skew:hover {
                transform: skew(30deg,0deg);
            }
            .matrix:hover {
                transform:matrix(0.866,0.5,-0.5,0.866,2,0);
            }
    
            @keyframes rotateX {
                from{
                    transform: rotateX(0deg);
                }
                to{
                    transform: rotateX(45deg);
                }
            }
    
            @keyframes rotateY {
                from{
                    transform: rotateY(0deg);
                }
                to{
                    transform: rotateY(50deg);
                }
            }
            @keyframes rotateZ {
                from{
                    transform: rotateZ(0deg);
                }
                to{
                    transform: rotateZ(50deg);
                }
            }
            .rotateX:hover{
                animation: rotateX 3s;
            }
            .rotateY:hover{
                animation: rotateY 3s;
            }
            .rotateZ:hover{
                animation: rotateZ 3s;
            }

### 二：过渡 ###

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

>  *  transition: height 2s ease-in 0s 简写
>  *  transition-property: height; 过渡css属性
>  *  transition-duration: 2s; 过渡持续时间
>  *  transition-timing-function: ease-in; 过渡时间函数
>  *  transition-delay: 0s; 过渡推迟时间

.demo1{
          width: 200px;
          height: 100px;
          background-color: aqua;
          /*过渡属性*/
          transition-property: height,background-color;
          /*过渡持续时间*/
          transition-duration: 2s;
          /*过渡时间函数*/
          transition-timing-function:ease-in;
          /*过渡推迟*/
          transition-delay: 0.5s;
        }
        .demo1:hover
        {
          height:200px;
          background-color: #ff4400;
        }

### 三：动画 ###

动画是使元素从一种样式逐渐变化为另一种样式的效果。

#### CSS3 @keyframes 规则 ####

百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

@keyframes myfirst
    {
        from {background: red;}
        to {background: yellow;}
    }

@keyframes myfirst
    {
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
    }

>  *  animation 简写
>  *  animation-name 动画名称
>  *  animation-duration 动画持续时间
>  *  animation-timing-function 动画时间函数
>  *  animation-delay 动画推迟时间
>  *  animation-iteration-count 动画迭代次数
>  *  animation-direction 播放方向（正逆）
>  *  animation-play-state 播放状态（paused，running）