css3 transition animation nick金沙官网线上

转换的原点transform-origin

在不指定原点前提前,默认原点为元素的中心处

取值:数值/百分比/关键字

一个值:所有轴位置

两个值:表示x轴和y轴

三个值:表示x轴,y轴,z轴

缩放

改变元素的尺寸

函数:scale()
取值:

1个值:表示第一个值和第二个值是相等的

2个值:第一个 x 第二个 y

单向缩放函数:

scaleX(x),scaleY(y)
取值:

默认值 为1

缩小:0-1之间的小数

放大:大于1的数值

 倾斜

函数:skew()

skewx() --x轴倾斜

skewy() --y轴倾斜

过渡延迟

作用:激发过渡操作后,等待多长时间后才开始执行过渡效果

属性:transition-delay

取值:以 s | ms为单位的时间

eg:transition-delay:5s;

2D转换

简写过渡属性  transition

属性:transition

取值:以空格分开的值列表
property duration timing-function delay;

eg:transition:background 1s linear 0s;

transition:background 1s;

多个过渡效果:
transition : background 1s linear 0s,
color 2s linear 0s,
border-radius 3s linear 1s;

animation-fill-mode

(ie10+)属性规定动画在播放之前或之后,其动画效果是否可见。

none --不改变默认行为。

forwards-- 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。

backwards --在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值 (在第一个关键帧中定义)。

both --向前和向后填充模式都被应用。

 说的也差不多了,直接上代码!

金沙官网线上 1金沙官网线上 2

<!DOCTYPE html>
<html>
 <head>
  <title>css3 transition animation nick </title>
  <meta charset="utf-8" />
  <style>
      body{background-color:#b2b2b2;}
      /*2d*/
      #d2{
          width:500px;
          margin:auto;
      }
      div[id^='img']{width:300px;height:300px;background-color:yellow;}
      #nav{margin:10px auto;}
      #nav a{
          padding:3px 10px;
          background:#666;
          color:#fff;
          font-weight:bold;
          border-radius:5px;
      }
      #showImg{
          width:400px;
          height:350px;
          border:1px solid #333;
          text-align:center;
          margin-top:20px;
          /*相对定位*/
          position:relative;
      }
      #showImg div{
          display:none;
      }
      #showImg div:target{
          display:block;
      }

      #showImg #img1:target{
          display:block;
          /*绝对定位*/
          position:absolute;
          top:0px;
          -webkit-animation:sliderLeft 3s linear;
      }
      /*定义动画*/
      @-webkit-keyframes sliderLeft{
          from{
              left:-350px;
          }
          to{
              left:0px;
          }
      }

      #showImg #img2:target{
          -webkit-animation:sliderBottom 3s linear;
          animation-fill-mode:forwards ;
      }
      @-webkit-keyframes sliderBottom{
          from{
              transform:skew(0deg,0deg);
          }
          to{
              transform:skew(45deg,30deg);
          }
      }
      #showImg #img3:target{
          -webkit-animation:scaleIn 3s linear 0s;
      }
      @-webkit-keyframes scaleIn {
          from{
              transform:scale(0);
          }
          to{
              transform:scale(1);
          }
      }

      #showImg #img4:target{
          -webkit-animation:rotateScale 3s linear;
      }
      @-webkit-keyframes rotateScale{
          from{
              transform:scale(0) rotate(0deg);
          }
          to{
              transform:scale(1) rotate(360deg);
          }
      }
      /*3d*/
      p{text-align:center}
    #stage{
        width:800px;
        height:500px;
        border-radius:50%;
        margin:0 auto;
        border:1px solid blue;
        position:relative;
        -webkit-perspective:1200px;
        /*被嵌套元素的显示模式*/
        transform-style:preserve-3d;
        transform:perspective(1200px) rotatex(0deg) rotatey(0deg);
        background-color: #4cd964;
    }
    #stage div{
        width:100px;
        height:100px;
        line-height:100px;
        border-radius:50%;
        background:red;
        position:absolute;
        left:350px;
        top:270px;
        text-align:center;
        font-size:26px;
        color:yellowgreen;
    }
    #stage div:nth-child(1){
        transform:rotatey(0deg) translatez(200px);
    }

    #stage div:nth-child(2){
        transform:rotatey(60deg) translatez(200px);
    }

    #stage div:nth-child(3){
        transform:rotatey(120deg) translatez(200px);
    }

    #stage div:nth-child(4){
        transform:rotatey(180deg) translatez(200px);
    }

    #stage div:nth-child(5){
        transform:rotatey(240deg) translatez(200px);
    }

    #stage div:nth-child(6){
        transform:rotatey(300deg) translatez(200px);
    }
@keyframes rotate3d {
    from{
        transform:perspective(1000px) rotatex(0deg) rotatey(0deg) rotatez(0deg);
    }
    to{
        transform:perspective(1000px) rotatex(-180deg) rotatey(-180deg) rotatez(180deg);
    }
}
      #stage:hover{
          animation:rotate3d 5s linear infinite;
          /*animation-fill-mode:forwards ;*/
      }
  </style>
 </head>
 <body>
 <!--2d-->
 <div id="d2">
     <div id="showImg">
         <div id="img1"></div>
         <div id="img2"></div>
         <div id="img3"></div>
         <div id="img4"></div>
     </div>
     <div id="nav">
         <a href="#img1">2D位移动画</a>
         <a href="#img2">2D倾斜动画</a>
         <a href="#img3">2D缩放动画</a>
         <a href="#img4">2D缩放旋转动画</a>
     </div>
 </div>

 <!--3d-->
 <p>鼠标悬停预览3d效果</p>
    <div id="stage">
        <div>WEB</div>
        <div>NICK</div>
        <div>WEB</div>
        <div>NICK</div>
        <div>WEB</div>
        <div>NICK</div>
    </div>
 </body>
</html>

View Code

最后展示下效果!

 

过渡时间

作用:指定过渡效果在多长时间内完成。

注意:可以以 s | ms 为单位.该属性不能省略,一旦省略则没有过渡效果

属性:transition-duration

取值:s|ms

eg:transition-duration:5s;

eg:transition-duration:5s,1s,1s;

2D位移

函数:translate()

取值:
translate(x) : 只做x轴(横向)移动
translate(x,y) : 做x轴和y轴的移动

方向:看符号

+

时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩!

 旋转

函数:rotate()

取值:金沙官网线上,rotate(ndeg)
n : 具体角度值

n为正, 则顺时针旋转

n为负, 则逆时针旋转

转换属性transform:

浏览器前缀:

-webkit-transform;-o-transform;-moz-transform;-ms-transform;
取值:
none : 默认值,没有转换操作

transform-function:一组转换函数

transform:函数1() 函数2() ......;

转换

过渡时间速度曲线函数

作用:定义整个过渡效果的速率。比如 先快后慢,还是 先慢后快,或者还是匀速

属性:transition-timing-function

取值:预定义值或贝塞尔曲线

ease : 默认值,慢速开始,快速变快,以慢速结束

linear:匀速

ease-in:慢速开始,加速效果

ease-out:慢速结束(快速开始),减速效果

ease-in-out:慢速开始和结束,中间先加后减

eg:transition-timing-function:linear;

过渡 

向右、向下

向左、向上

注意:

取值可以为数值或百分比、负数

单向位移函数:
translateX(x) : 只做x轴移动
translateY(y) : 只做y轴移动

动画

动画的详细参数去看w3c吧!

这里就提下注意的地方:

@keyframes语法:(单独写,在选择器外,style内)
@keyframes name{
from {css样式;}
percent{css样式;}
to {css样式;}
}

animation语法:(写在选择器内)
animation:name duration timing-function delay iteration-count direction;

过渡属性

作用:指定元素在哪些css属性上的变化会产生过渡的效果(必须的)

属性:transition-property

取值:none | all | property

eg:transition-property:background;

eg:transition-property:background,width,height;

本文由金沙官网线上发布于Web前端,转载请注明出处:css3 transition animation nick金沙官网线上

您可能还会对下面的文章感兴趣: