小程序CSS常用动画示例

一、前言

正如android的四大动画一样：

  • translate:移动
  • alpha:透明度变化
  • rotate:旋转
  • scale:尺寸变化

css也可以实现

二、​​CSS3的2D转换​​

2d​​transform​​的方法:

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

函数

描述

translate(x,y)

定义 2D 转换，沿着 X 和 Y 轴移动元素。

translateX(n)

定义 2D 转换，沿着 X 轴移动元素。

translateY(n)

定义 2D 转换，沿着 Y 轴移动元素。

scale(x,y)

定义 2D 缩放转换，改变元素的宽度和高度。

scaleX(n)

定义 2D 缩放转换，改变元素的宽度。

scaleY(n)

定义 2D 缩放转换，改变元素的高度。

rotate(angle)

定义 2D 旋转，在参数中规定角度。

skew(x-angle,y-angle)

定义 2D 倾斜转换，沿着 X 和 Y 轴。

skewX(angle)

定义 2D 倾斜转换，沿着 X 轴。

skewY(angle)

定义 2D 倾斜转换，沿着 Y 轴。

三、示例

如下以小程序为例，对移动、透明度、旋转和缩放动画进行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;
  }
}
  • 效果

小程序CSS常用动画示例_缩放