小程序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演示

小程序布局 <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; } } 效果