AitSchool

动画

属性知识点：

  • 变换 transform
  • 过渡 transition
  • 动画 animation

变换 transform

  • 对元素进行平移、旋转、缩放
  • transform 不会对其他元素布局产生影响
  • 取值：none 、transform-list

transform 书写的顺序（ 先旋转或者先平移的顺序 ），会影响到展示结果。

变换值

  • translate(100px,0) 在 X 轴上平移 100px , Y 轴平移 0px
  • rotate(45deg) 旋转 45 度
  • scale(2,0.5) 在 X 轴方向拉伸 2 倍，在 Y 轴压缩一半

如果指定某一坐标轴变换

  • translateX
  • translateY
  • scaleX
  • scaleY

原点 transform-origin

以哪个点为原点进行变换，默认以元素的中心点为原点

3D Transform

在 2D 的基础上添加了一个 Z 轴，垂直于屏幕观众的方向。

perspective

perspective 越小，距离人眼越近，变换越夸张。不能是负值。

  • 指定进行 3D 渲染时，人眼距离 Z 平面的距离
  • 不会影响到元素本身的渲染
  • 只影响元素 3D 效果

变换值

  • translate3d
  • translateZ
  • rotate3d
  • rotateX
  • rotateY

过渡 transition

指定一个样式状态到另一个状态时如何过渡，告诉用户发生了什么。

  • transition-property 什么属性发生变化时需要过渡
  • transition-duration 过渡的时间持续多长时间
  • transition-timing-function 速度变化时什么样
  • transition-delay 是否有延迟

transition 简写

transition: transition-property transition-duration transition-timing-function transition-delay;
transition: all 2s ease-in;

transition 可以同时制定多个 transition-list

transition: width 1s ease 1s, height 1s ease;

某些属性时不能做动画的，例如 display

动画 animation

可以实现更复杂的样式变化效果，定义关键帧，指定动画行为。

animation: name duration timing-function delay iteration-count direction;
  1. 首先要通过 @keyframes 定义一个动画
@keyframes down{
    from {
        margin-top: 0;
        opacity: 1;
    }
    50% {
        margin-top: 0.5em;
        opacity: 0.3;
    }
    to {
        margin-top: 0;
        opacity: 1;
    }
}
  1. 再通过 animation 属性运用到元素上
animation: down 1.5s ease infinite;

transform DEMO

hover 配合 transform 的卡片事例。当鼠标悬浮在卡片时候，下部分的内容会从下往上滑动出现。

  • HTML
<div class="container">
  <div class="card">
    <span>鼠标过来呀 ～</span>
    <div class="hover-content">滑动从底部出现</div>
  </div>
</div>
  • CSS
/*定义容器*/
.container{
  position: relative;
  margin: 100px auto 0;
  width: 200px;
}
/* 定义卡片容器*/
.card{
  position: relative;
  display: inline-block;
  width: 200px;
  height: 300px;
  overflow: hidden;
  box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2);
  border-radius: 5px;
  transition: all .2s ease;
}

/* 卡片hover阴影效果 */
.card:hover{
  box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2);
}
/* 卡片hover的内容容器 */
.card .hover-content{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #34b558;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  transform: translateY(100%);
  transition: all .2s ease;
}
/* 卡片hover的内容容器动画 */
.card:hover .hover-content{
  transform: translateY(0);
}

参考

← 布局 →