小程序CSS常用动画示例

一、前言

正如android的四大动画一样：

• translate:移动

• alpha:透明度变化

• rotate:旋转

• scale:尺寸变化

css也可以实现

二、CSS3的2D转换

2dtransform的方法:

我们能够对元素进行移动、缩放、转动、拉长或拉伸

三、示例

如下以小程序为例，对移动、透明度、旋转和缩放动画进行demo演示

• 小程序布局

<view>
  <view class="column-container" style="width:100%;height:100%;">
    <view class="top-item">top</view>
    <view class="row-container" style="width:100%;flex:1;">
      <view class="left-item">left</view>
      <view class="center-item">center</view>
      <view class="right-item">right</view>
    </view>
    <view class="bottom-item">bottom</view>
  </view>
</view>

• css布局文件

.column-container {
  display: flex;
  position: relative;
  flex-direction: column;
}

.row-container {
  display: flex;
  position: relative;
  flex-direction: row;
}

.top-item {
  position: relative;
  width: 100%;
  height: 300rpx;
  background-color: #f00;
  animation: fadeTopIn 2s;
}

.left-item {
  position: relative;
  flex:1;
  height: 300rpx;
  background-color: #00f;
  animation: fadeLeftIn 2s;
}

.right-item {
  position: relative;
  flex:1;
  height: 300rpx;
  background-color: #0f0;
  animation: fadeRightIn 2s;
}

.center-item {
  position: relative;
  flex: 1;
  height: 300rpx;
  background-color: #ff0;
  animation: rotateCircle 2s linear infinite;
}

.bottom-item {
  position: relative;
  width: 100%;
  height: 300rpx;
  background-color: #f00;
  animation: fadeBottomIn 2s;
}

@keyframes fadeTopIn {
  0% {
    transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes fadeBottomIn {
  0% {
    transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeLeftIn {
  0% {
    transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeRightIn {
  0% {
    transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes popIn {
  0% {
    transform: scale3d(0.5, 0.5, 0.5);
    opacity: 0;
  }
  50% {
    animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
  }
  100% {
    transform: scale3d(1, 1, 1);
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
  }
}

@keyframes rotateCircle {
  0% {
    transform: rotate(0deg);
    opacity: 0;
  }
  25% {
    transform: rotate(90deg);
    opacity: 0.5;
  }
  50% {
    transform: rotate(180deg);
    opacity: 1;
  }
  75% {
    transform: rotate(270deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}

• 效果