CSS(5) CSS3过渡变换和动画

本文深入解析CSS中的过渡效果和动画技巧,涵盖过渡属性、时间函数、延迟、变换操作、三维变换、动画创建及应用,通过实例展示如何实现平滑过渡、元素变换及无缝动画效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、过度
    添加过渡效果:过渡效果执行完毕之后,默认会还原到原始状态
    1.transition-property:添加过渡效果的样式属性名称
    transition-property: left;//
    
    2.transition-duration:过渡效果的耗时 以秒做为单位
    transition-duration: 2s;//设置过度耗时为2秒
    
    3.transition-timing-function:设置时间函数--控制运动的速度,属性值有点多,参考相关文档
    transition-timing-function: linear;//均速过度,默认是ease(先快后慢)
    transition-timing-function: steps(5);//整个过度过程分为5步完成
    
    4.transition-delay:过渡效果的延迟
    transition-delay: 2s;//过度的延迟时间
    
    5.transition:为多个样式同时添加过渡效果
    transition: height 2s,width 2s linear 0s,background-color 5s linear 0s;
    
    注意:
        过渡效果只能产生从某个值到另外一个具体的值的过渡,比如不能加display:none过度到display:block;
        一定要设置为哪些css样式添加过渡效果
        一定要设置过渡效果的耗时
         
    例子:想通过过度的效果实现鼠标移动到div上,div变大变色,鼠标离开div后,默认会自动还原
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            /*为多个样式同时添加过渡效果*/
            transition: height 2s linear 0s,width 2s linear 0s,background-color 5s linear 0s;
        }
        div:hover{
            height: 400px;
            width: 400px;
            background-color: blue;
        }
    </style>
    <body>
    <div></div>
    </body>
    
2、二维变换 
    transform
    
    1.移动:translate 
        移动是参照元素的左上角
        执行完毕之后会恢复到原始状态,和过度一样
        如果只有一个参数就代表x方向
        如果有两个参数就代表x/y方向
        如:transform: translate(100px,100px);//让某元素向x轴方向和y轴方向移动100px
        添加水平或者垂直方向的移动
        transform:translateX(100px);//transform: translate(100px,0px);
        transform:translateY(100px);//transform: translate(0px,100px);
        
    2.缩放:scale    
        实现缩放,1指不缩放,>1.01放大  <0.99缩小
        默认参照元素的几何中心进行缩放或扩展
        如果只有一个参数,就代表x和y方向都进行相等比例的缩放
        如果有两个参数,就代表x/y方向
        transform: scale(2);//x y 方向都扩大2倍
        transform: scale(2,1);//x方向扩大2倍,y方向上不变
        transform:scaleX(0.5);//缩放或扩展指定的方向
        transform:scaleY(0.5);//缩放或扩展指定的方向      
        
    3.旋转:rotate
        rotate(数值)。数值表示多少度,可正可负,正数为顺时针方向,负数为逆时针方向
        默认参照元素的几何中心进行旋转
        如:transform: rotate(-90deg)//逆时针
        
    4.斜切:skew
        skew(数值)。数值表示多少度,可正可负,正数为顺时针方向,负数为逆时针方向
        
    transform-origin:
        设置旋转或者缩放轴心
        可以用2个数字表示x和y坐标
        可以使用2个关键字表示某个点:left top right bottom center
        transform-origin:100px 100px;//100,100坐标点
        transform-origin:left top;//左上角
        
3、设置任意元素居中:
        父元素绝对定位(也可是其他定位,只要是定位即可)
        子元素相对定位
        设置子元素的left和top值分别为50%。定位的百分比是参照父容器的宽高
        使用transform实现元素的居中,transform: translate(-50%,-50%);,百分比是参照元素本身的宽高
    
        示例:
        <style>
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                width: 400px;
                height: 400px;
                position: relative;
            }
            .rec{
                width: 200px;
                height: 200px;
                position: absolute;
                /*定位的百分比是参照父容器的宽高*/
                left: 50%;
                top: 50%;
                /*使用transform实现元素的居中  百分比是参照元素本身的宽高*/
                transform: translate(-50%,-50%);
            }
        </style>
        <div class="box">
            <div class="rec"></div>
        </div>
        
4、三维变换
    transform
    
    1.移动:translate3d
        translate3d(X方向的偏移,Y方向的偏移,Z方向的偏移)
        transform: translate3d(400px,0,0);//transform: translate3dX(400px);
        transform: translate3d(0px,400px,0);//transform: translate3dY(400px);
        transform: translate3d(0px,0px,400px);//transform: translate3dZ(400px);
        
    2.缩放:scale3d
        scale3d(x方向上的缩放,y方向的缩放,z方向的缩放)
        大于1为放大,小于1为缩小
        
    3.旋转:rotate3d
        rotate3d(x,y,z,angle);
        x:代表x轴方向上的一个向量值
        y:代表y轴方向上的一个向量值
        z:代表z轴方向上的一个向量值
        angle为一个角度
        
5、案例:实现一个正方体        
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            position: relative;
            margin: 100px auto;
            transform: rotate3d(1,1,0,-30deg);/*x y z 不能带单位*/
            /*让子元素保留3d变换之后的效果*/
            transform-style: preserve-3d;
        }
        .box>div{
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: 0.4;/*设置透明度*/
        }
        .front{
            background-color: red;
            transform: translateZ(100px);
        }
        .back{
            background-color: purple;
            transform: translateZ(-100px) rotateY(180deg);
        }
        .left{
            background-color: green;
            transform: translateX(-100px) rotateY(-90deg);
        }
        .right{
            background-color: orange;
            transform: translateX(100px) rotateY(90deg);
        }
        .top{
            background-color: pink;
            transform: translateY(-100px) rotateX(90deg);
        }
        .button{
            background-color: blue;
            transform: translateY(100px) rotateX(-90deg);
        }
    </style>
    <div class="box">
        <div class="front">front</div>
        <div class="back">back</div>
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="top">top</div>
        <div class="button">button</div>
    </div>

6、添加动画
    
    创建动画
    百分比是指整个动画耗时的百分比
    @keyframes moveTest {
        0%{
            transform: translate(0,0);
        }
        50%{
            transform: translate(0,500px);
        }
        100%{
            transform: translate(500px,500px);
        }
    }
        上述定义假设动画耗时2秒,那么表示前一秒将元素向y轴正方向移动500px,后一秒将元素向x轴正方向移动500px
        0%可以写成from
        100%可以写成to
    @keyframes moveTest {
        from{
            transform: translate(0,0);
        }
        50%{
            transform: translate(0,500px);
        }
        to{
            transform: translate(500px,500px);
        }
    } 
    
    添加动画效果
    1.animation-name:指定动画名称 必填
        animation-name: moveTest;
    2.animation-duration设置动画的总耗时 必填
        animation-duration: 2s;
    3.animation-iteration-count设置动画的播放次数,
        默认为1次  可以指定具体的数值,也可以指定infinite(无限次)
        animation-iteration-count: 1;
    4.animation-direction设置动画方向
        normal: 正常方向 
        reverse: 反方向运行 
        alternate: 来回交替运行 
        alternate-reverse: 动画先反运行再正方向运行,来回交替运行  
        animation-direction: alternate;
    5.animation-delay设置动画的延迟
        animation-delay: 2s;
    6.animation-fill-mode设置动画结束时的状态:
        默认情况下,动画执行完毕之后,会回到原始状态
        forwards:会保留动画结束时的状态,在有延迟的情况下,并不会立刻进行到动画的初始状态
        backwards:不会保留动画结束时的状态,在添加了动画延迟的前提下,如果动画有初始状态,那么会立刻进行到初始状态
        both:会保留动画的结束时状态,在有延迟的情况下也会立刻进入到动画的初始状态
        animation-fill-mode: both;
    7.animation-timing-function动画的时间函数
        animation-timing-function: linear;//和过度的时间函数类似
    8.animation-play-state设置动画的播放状态  
        paused:暂停   
        running:播放
        animation-play-state: running;
        
    9.简写animation:
        animation:动画名称 动画耗时;
        
7、动画案例1 无缝滚动
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 882px;
            height: 86px;
            margin:100px auto;
            background-color: #ddd;
            overflow: hidden;
        }
        div >ul{
            width: 200%;
            list-style: none;
            animation-name: move;/*1.设置的名称*/
            animation-duration: 7s;/*2.设置动画的耗时*/
            animation-iteration-count: infinite;/*3.市场无限循环*/
            animation-timing-function: linear;/*4.设置时间函数*/
        }
        div > ul > li{
            width:126px;
            float: left;
        }
        div > ul > li > img{
            width:100%;
        }
        /*鼠标上移,停止动画*/
        div:hover > ul{
            cursor: pointer;
            animation-play-state: paused;
        }
        /*创建动画*/
        @keyframes move {
            from{
                transform:translateX(0);
            }
            to{
                transform:translateX(-882px);
            }
        }
    </style>
    <div>
        <ul>
            <li><img src="../images/1.jpg" alt=""></li>
            <li><img src="../images/2.jpg" alt=""></li>
            <li><img src="../images/3.jpg" alt=""></li>
            <li><img src="../images/4.jpg" alt=""></li>
            <li><img src="../images/5.jpg" alt=""></li>
            <li><img src="../images/6.jpg" alt=""></li>
            <li><img src="../images/7.jpg" alt=""></li>
            <li><img src="../images/1.jpg" alt=""></li>
            <li><img src="../images/2.jpg" alt=""></li>
            <li><img src="../images/3.jpg" alt=""></li>
            <li><img src="../images/4.jpg" alt=""></li>
            <li><img src="../images/5.jpg" alt=""></li>
            <li><img src="../images/6.jpg" alt=""></li>
            <li><img src="../images/7.jpg" alt=""></li>
        </ul>
    </div>
    
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值