h5c3从入门到精通day03

01transition过度

过渡：给用户呈现 由一种样式到另一种样式的过程

指定当前box具有过渡效果

过渡的属性名称

 transition-property: width height;

 过渡花费的时间 
transition-duration: 1s; 

 过渡的曲线 
 匀速 
transition-timing-function: linear; 

缓慢 
 transition-timing-function: ease; 

加速 由慢到快 
transition-timing-function: ease-in;

 快慢快 
 transition-timing-function: ease-in-out;

过渡何时开始
 transition-delay: 

 

过渡的简写形式 transition: all 1s ease;

03平移

transform: translate(100px, 0px);

04缩放

transform: scale(0.2, 0.2);

05旋转

transform: rotateX(90deg);

06转换原点

transform-origin: left top; 

 transform-origin: right top; 

 transform-origin: right bottom; 

transform-origin: left bottom;

07倾斜

transform: skew(30deg,30deg);

083d透视

/* 透视 */

perspective: 1000px;

/* 背部可见性 */

 backface-visibility: hidden;

/* 保留子元素的3d位置 */

 transform-style: preserve-3d;

09animation动画
/* 应用到目标元素上 */

/* 动画名称 */

 animation-name: move;

  /* 动画时间 */

animation-duration: 1s;

 /* 动画曲线 */

 animation-timing-function: ease;

 /* 动画何时开始 */

/* animation-delay: 2s; */

 /* 动画次数 */

 animation-iteration-count: infinite;

 /* 动画是否暂停 */

animation-play-state: running;

/* 动画是否逆向 */

/* reverse 颠倒 */

  /* alternate 交替 */

 /* alternate-reverse 颠倒交替 */

  animation-direction: alternate;

 /* 动画之外的状态 */

/* animation-fill-mode: ; */

/* 创建一个自定义动画 */

@keyframes 动画名称{
两个动画帧

from{}

to{}

  10多个动画帧

@keyframes move {
            0% {
                transform: translateX(0px) translateY(0px);
            }
 
            25% {
                transform: translateX(700px) translateY(0px);
            }
 
            50% {
                transform: translateX(700px) translateY(700px);
            }
 
            75% {
                transform: translateX(0px) translateY(700px);
            }
 
            100% {
                transform: translateX(0px) translateY(0px);
            }
        }