小程序CSS常用动画示例

小程序CSS常用动画示例

一、前言

正如android的四大动画一样：

• translate:移动

• alpha:透明度变化

• rotate:旋转

• scale:尺寸变化

css也可以实现

二、CSS3的2D转换

2dtransform的方法:

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

函数	描述
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演示

• 小程序布局

  
    top
    
      left
      center
      right
    
    bottom
  

• 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;
  }
}

• 效果