CSS实现动画效果

Posted by xiongmao; tagged with CSS过渡效果 , CSS动画效果 , CSS变形 , CSS旋转 , CSS缩放

目录:

一.过渡效果
过渡
    transition-property:  过渡效果
    transition-duration:  指定过渡效果的持续时间
    时间单位:s 和ms
        
过渡(trannsition)
    -通过过渡可以指定一个属性发生变化时的切换方式
    -通过过渡可以创建一些非常好的效果,提升用户的体验
transition-property : 指定过渡的属性,多个属性见使用,隔开,如果所有属性过渡,则使用all关键字

transition-duration: 指定过渡效果的持续时间
    单位:s和ms
           
transition-timing-function: 过渡的时序函数
指定过渡的执行的方式
      可选值:
            ease 默认值,慢速开始,先加速,再减速
            linear 匀速运动
            ease-in 加速运动
            ease-out 减速运动
            ease-in-out 先加速,后减速
            cubic-bezier() 来指定时序函数
       https://cubic-bezier.com
           steps() 分布执行过渡效果
                    可以设置一个第二个值:
                          end,在时间结束时,执行过渡(默认)
                          start 在时间开始时执行过渡
使用方法:
    transition-timing-function: cubic-bezier(.24,.95,.82,-0.88);
    transition-timing-function: steps(2,start);

transition-delay:过渡效果的延迟,等待一段时间后执行过渡
        transition-delay: 2s;
动画效果
<!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>
        *{
            margin: 0px;
        }
        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
        .box1:hover div{
            animation-play-state: paused;
        }
        .box2{
            background-color: #bfa;
            
设置动画  必须设置关键帧
      animation-nam : 要对当前元素生效的关键帧的名
      animation-name: text;
            
      animation-duration : 动画的执行时间
      animation-duration: 4s;
            
动画的延时
      animation-delay: 2s;
      animation-timing-function:ease-in-out;
            
动画执行次数
      animation-iteration-count 动画执行的次数
           可选值:
                 次数
                 infinite 无线执行
            
 animation-iteration-count: infinite;
            
animation-direction:指定动画运行的方向
   可选值:
      normal 默认值 从from 向 to 运行 每次都是这样
      reverse 从 to  运行 from 每次都是这样
      alternate  从from 向to 运行 重复执行动画反向执行
      alternate-reverse 从to 向from运行 重复执行动画时方向执行
            
      animation-direction: alternate;

          
animation-fill-mode: 动画填充模式
   可选值:
       none 默认值 动画执行完毕回到原来位置
       forwards 动画执行完毕元素会停止在动画结束的位置
       backwards 动画延迟等待时,元素就会处于开始位置
       both 结合 forward 和backwards
  
            
animation-play-state: 设置动画的执行状态
        可选值:
            running 默认值 动画执行
            paused 动画暂停
            

        }


            
动画
    动画和过渡类似,都可以实现一些动态效果
    不同的是过渡需要在某个属性发生变化时才会触发
    动画可以自动触发动态效果
                
 设置动画效果,必须要设置一个关键帧,关键帧设置了动画执行的每一个步骤
            
            @keyframes  text {
                from{
                    margin-left: 0px;
                }
                to{
                    margin-left: 700px;
                }
            }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>
三.变形
transform 用来设置变形效果
  -平移:
      translateX() 沿者x轴方向平移
      translateY() 沿者y轴方向平移
      translateZ() 沿者z轴方向平移
          -平移元素,百分比是相对于自身计算的
        

z轴变形,旋转以及缩放

<!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>
  设置当前网页的视距为800px 人眼距离网页的距离
        body{
            perspective: 800px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #fba;
            margin: 200px auto;
            transition: 2s;
        }
        
z轴平移:调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离
     距离越大,元素离人越近
     z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视的,
     如果需要看见效果必须需设置网页的视距
        */
        body{
            border: 1px solid red;
        }
        body:hover .box1{
 /*transform: translateZ(800px) translateX(500px); */
            
旋转可以使元素沿者x y 或 z 旋转指定的角度
     rotateX()
     rotateY()
     rotateZ()

/* transform: rotateZ(180deg) translateZ(400px); */
        transform: rotateY(180deg);
        
是否显示元素的背面
        backface-visibility  
                 visible 显示
                  hidden  不显示
             */
             backface-visibility: visible;
        }


缩放:scale()
  对元素进行缩放的函数
        scaleX()  水平方向缩放
        scaleY()  垂直方向缩放
        scale()   双方向缩放
      transform:scale(2)   缩放两倍
        

        
变形原点默认值center
      transform-origin:20px 20px;
        
    </style>
</head>
<body>
    <div class="box1"></div>
    
</body>
</html>