css形变及动画

<div id="parent">
  <div id="child">变形的子元素</div>
</div>
复制代码

/* 2D变换 */
#child{
    transform:translate(50px,50px) /* 向右下平移 */
              scale(2) /* 放大二倍 */
              rotate(30deg) /* 旋转30度 */
              skew(30deg,0); /* 扭曲 */
}
复制代码

/* 3D变换 */
#parent{
/* 3D变换父盒子设置 */
transform-style: preserve-3d; /* 3D变换 */
transform: perspective(200px); /* 视距 */
}
#child{
    transform:translate3d(50px,50px,50px) 
              scale3d(1,1,1) 
              rotate(1,2,1,30deg);
}
复制代码

/* transform属性设置 */
transform-origin:center;  /* 设置形变中心 */
transform-style:preserve-3d; /* 设置3D形变 */
perspective:200px; /* 视距 */
perspective-origin:center;/* 设置视距基点 */
backface-visibility：hidden;/* 3D背面不可见 */
复制代码

/* transition */
#child{
    transition: all 1s linear 2s;
    transition-property:all;  /* 指定需要过渡的CSS属性 */
    transition-duration:1s; /* 过渡需要的时间 */
    transition-timing-function:linear; /* 过渡函数 */
    transition-delay:2s; /* 延迟开始过渡的时间 */
}
复制代码

/* animation */
@keyframes mymove {   /* 定义动画 */
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;}
}
#parent{
     /* 简单的样式 */
    position:relative;
    width:500px;
    height:500px;
    border:1px solid black;
}
#child{
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid red;
    animation: mymove 2s linear 0s 2;  /* 使用动画 */
     /* 动画属性介绍 */
    animation-name:mymove; /* 指定@keyframes的名字 */
    animation-duration:2s; /* 动画持续时间 */
    animation-timing-function:linear; /* 动画播放方式 */
    animation-delay:0; /* 延迟开始动画的时间 */
    animation-iteration-count:infinite; /* 动画循环播放的次数(无限次) */
    animation-direction:normal; /* 动画播放的方向 */
}
复制代码

简单记录一下用法，详细介绍在下面链接

详细animation介绍 详细transition介绍 详细transform介绍

转载于:https://juejin.im/post/5be0159b6fb9a049ee7fe7f1