这是我参与11月更文挑战的第10天，活动详情查看：2021最后一次更文挑战

当网页不兼容的时候需要加上私有前缀例如谷歌-webkit-

-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */

🥯 transform

CSS3 transform 属性通常可以执行4个操作移动、旋转、缩放、翻转

<div class="box">
    <div class="imgBox">
        <img src="./imgs/ok.jpg" alt="">
    </div>
</div>

外边的大盒子（box）我们设置宽高500px, 并设置弹性盒模型，将小盒子（imgBox）水平居中，垂直居中，设置宽高200px, 当鼠标滑过小盒子时触发动画

.box{
    width: 500px;
    height: 500px;
    background-color: #fad4d4;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box .imgBox{
    width: 200px;
    height: 200px;
}
.box .imgBox img{
    width: 100%;
    height: 100%;   
}
img:hover{
   ......
}

一个参数默认是水平移动，两个参数是（水平移动，垂直移动），可以看成一个坐标系，translateX是使用于X轴的值，translateY是使用于Y轴的值，translateZ是使用于Z轴的值，rotateX等也是一样的

平移
transform: translate(0px, -10px);
旋转
transform: rotate(0px, -10px);
缩放
transform: scale(1.5);
翻转（perspective 透视）
// transform: rotate(180deg);
transform: perspective(200px) rotateY(180deg);

我们可以给img设置动画慢一点,设置3秒完成 transition: all 3s;

🍕 过渡

过渡属性
transition-property: none | all | property; 
过渡完成时间 
transition-duration: s | ms;
延迟时间
transition-delay: s | ms;
过渡函数 
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;

linear 规定以相同速度开始至结束的过渡效果 ; ease 规定慢速开始，然后变快，然后慢速结束的过渡效果 ; ease-in 规定以慢速开始的过渡效果 ; ease-out 规定以慢速结束的过渡效果 ; ease-in-out 规定以慢速开始和结束的过渡效果 ; cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

.imgBox{
    width: 200px;
    height: 200px;
    background-color: thistle;
    transition: all 2s linear;
}
      
.imgBox:hover{
    background-color: yellow;
    width: 300px;
}

🍥 animation 动画

animation-name: keyframename|none;
animation-duration: s | ms;
transition-delay: s | ms;
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out;
动画的播放次数
animation-iteration-count: n 次数 | infinite 无限次; 
是否应该轮流反向播放动画
animation-direction: normal 默认值，动画正常播放 | alternate 动画应该轮流反向播放;

轮播图案例

<div class="container">
    <div class="box">
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="3.jpg" alt="">
        <img src="4.jpg" alt="">         
    </div>
</div>

        /* 设置一个图片的宽度高度，超出的地方隐藏 */
        .container{
            width: 600px; 
            height: 375px; 
            overflow: hidden;
            margin: 0 auto;
        }
        .box{
            /* 让div可以并排放4张宽度为600px的图片 */
            width: 2400px;
            height: 375px;
            background-color: black;
            /* 引入slideshow动画，动画完成时间5s，无限播放 */
            animation: slideshow 5s infinite ;
        }
        img{
            /* 设置统一大小 */
            width: 600px;
            height: 375px;
            float: left;
        }
         /* 左移一张图片的宽度 */
        @keyframes slideshow  {
            0%{  transform: translate(0); } 
            10%{ transform: translate(0); }
            35%{ transform: translate(-600px ); }
            70%{ transform: translate(-1200px); }
            100%{transform: translate(-1800px); }
        }

css简单动画🍪

🥯 transform

🍕 过渡

🍥 animation 动画