动画
文章目录
- 1. 弹出层
- 2. flex
- 3. 连续动画
- 4.Vue动画
- 4.1动画
- 5. 关键帧动画
- 5.1 animate.css
- 5.2 animation
- 5.3例子
- 5.4 匹配各种浏览器
- 6. 水波纹效果
- 7.div边缘发光
- 8. 水平滚动动画
1. 弹出层
底部弹出
/* 底部弹出 start */
.setting__options--toUp {
position: fixed;
left: 0;
right: 0;
bottom: -100%;
z-index: 200;
background: #fff;
border: 1px solid;
}
.toUp {
animation: toUp 1.1s ease-in-out 0s;
animation-fill-mode: forwards;
}
@keyframes toUp {
0% {
bottom: -100%;
}
100% {
bottom: 0;
}
}
.toUpBack {
animation: toUpBack 1.1s ease-in-out 0s;
animation-fill-mode: forwards;
}
@keyframes toUpBack {
0% {
bottom: 0;
}
100% {
bottom: -100%;
}
}
2. flex
transition: all 1s; flex：2 flex：1
transition: all 1s;
.flex-2{
flex:2;
}
衰弱株
濒危株
正常株
// 类型选项
get_search: function(e) {
this.setData({
active_num: e.target.dataset.id
})
},
--------------------------------
弹跳动画
@keyframes bounce {
60%, 80%, to { transform: translateY(350px); }
70% { transform: translateY(250px); }
90% { transform: translateY(300px); }
}
.ball {
/* 尺寸样式、颜色样式等 */
animation: bounce 3s infinite;
}
-----------------------------------------------
{{item.desc}}
{{item.num}}
次
3. 连续动画
.rightToLeft{
animation: rightToLeft 5s linear 0s infinite alternate;
}
@keyframes rightToLeft{
0%{
left:572rpx;
top:2262rpx;
}
100%{
left:516rpx;
top:2195rpx;
}
}
4.Vue动画
4.1动画
hello
new Vue({
el: '#example-1',
data: {
show: true
}
})
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
5. 关键帧动画
5.1 animate.css
animation-duration---动画持续时间
animation-delay---动画延迟时间，多个元素，延迟时间要依次累加
animation-iteration-count---动画执行次数
animation-fill-mode:both---设置对象状态为动画结束或开始的状态
.xxx{animation-duration:2s;animation-delay:4s;animation-fill-mode:both;}
5.2 animation
animation:
name 动画名称
duration 动画指定需要多少秒或毫秒完成
timing-function
设置动画如何完成一个周期
值：linear 匀速
ease 先慢后快，结束前变慢 默认
ease-in 低速开始
ease-out 低速结束
ease-in-out 低速开始和结束
cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
delay 动画在启动前的延迟间隔
iteration-count 动画的播放次数
值：n 一个数字，定义播放多少次动画 默认值1
infinite 动画无限次播放
direction
值：normal 正常
reverse 反向播放
alternate 在奇数次正向播放，在偶数次反向播放
alternate-reverse 在奇数次反向播放，在偶数次正向播放
fill-mode 当动画不播放时
当动画完成时，或当动画有一个延迟未开始播放时，要处于什么状态
值：none 默认，播放完动画后，画面停在起始位置
forwards 播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
backwards 如果设置了animation-delay，
在开始到delay这段时间，画面停在第一帧。
如果没有设置delay，画面是元素设置的初始值
both 设置动画状态为动画结束或开始的状态
（例如设置奇数播放为forwards状态，偶数播放为backwards状态）
play-state 动画是否正在运行或已暂停
值：paused 指定暂停动画
running 指定正在运行的动画，默认
5.3例子
.myDiv {
background: darkcyan;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: flood 3s linear infinite;
}
@keyframes flood {
from {
width: 100px;
height: 100px;
border-radius: 100px;
opacity: 0.4;
}
to {
width: 400px;
height: 400px;
border-radius: 400px;
opacity: 1;
}
}
5.4 匹配各种浏览器
-webkit-animation: glow 800ms ease-out infinite alternate;
-moz-animation: glow 800ms ease-out infinite alternate;
-o-animation: glow 800ms ease-out infinite alternate;
-ms-animation: glow 800ms ease-out infinite alternate;
animation: glow 800ms ease-out infinite alternate;
6. 水波纹效果
.wave {
position: relative;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 12px;
}
.wave .circle {
position: absolute;
border-radius: 50%;
opacity: 0;
}
/* 波纹效果 */
.wave.ripplecir .circle {
width: calc(100% - 6px); /* 减去边框的大小 */
height: calc(100% - 6px);/* 减去边框的大小 */
border: 3px solid #fff;
}
/* 一级水波纹 */
.wave.ripplecir.level1 .circle:first-child {
animation: circle-opacity 1s infinite;
}
.wave.ripplecir.level1 .circle:nth-child(2) {
animation: circle-opacity 1s infinite;
animation-delay: .25s;
}
.wave.ripplecir.level1 .circle:nth-child(3) {
animation: circle-opacity 1s infinite;
animation-delay: .5s;;
}
.wave.ripplecir.level1 .circle:nth-child(4) {
animation: circle-opacity 1s infinite;
animation-delay: .75s;
}
.wave.ripplecir.level1 {
color: #e73828;
}
.wave.ripplecir.level1 i{
color: #e73828;
}
.wave.ripplecir.level1 .circle {
border-color: #e73828;
}
/* 二级水波纹 */
.wave.ripplecir.level2 .circle:first-child {
animation: circle-opacity 2s infinite;
}
.wave.ripplecir.level2 .circle:nth-child(2) {
animation: circle-opacity 2s infinite;
animation-delay: .5s;
}
.wave.ripplecir.level2 .circle:nth-child(3) {
animation: circle-opacity 2s infinite;
animation-delay: 1.0s;;
}
.wave.ripplecir.level2 .circle:nth-child(4) {
animation: circle-opacity 2s infinite;
animation-delay: 1.5s;
}
.wave.ripplecir.level2 {
color: #f39700;
}
.wave.ripplecir.level2 i{
color: #f39700;
}
.wave.ripplecir.level2 .circle {
border-color: #f39700;
}
/* 三级水波纹 */
.wave.ripplecir.level3 .circle:first-child {
animation: circle-opacity 4s infinite;
}
.wave.ripplecir.level3 .circle:nth-child(2) {
animation: circle-opacity 4s infinite;
animation-delay: 1s;
}
.wave.ripplecir.level3 .circle:nth-child(3) {
animation: circle-opacity 4s infinite;
animation-delay: 2s;;
}
.wave.ripplecir.level3 .circle:nth-child(4) {
animation: circle-opacity 4s infinite;
animation-delay: 3s;
}
.wave.ripplecir.level3 {
color: #fff000;
}
.wave.ripplecir.level3 i{
color: #fff000;
}
.wave.ripplecir.level3 .circle {
border-color: #fff000;
}
/* 四级水波纹 */
.wave.ripplecir.level4 .circle:first-child {
animation: circle-opacity 8s infinite;
}
.wave.ripplecir.level4 .circle:nth-child(2) {
animation: circle-opacity 8s infinite;
animation-delay: 2s;
}
.wave.ripplecir.level4 .circle:nth-child(3) {
animation: circle-opacity 8s infinite;
animation-delay: 4s;
}
.wave.ripplecir.level4 .circle:nth-child(4) {
animation: circle-opacity 8s infinite;
animation-delay: 6s;
}
.wave.ripplecir.level4 {
color: #2da7e0;
}
.wave.ripplecir.level4 i{
color: #2da7e0;
}
.wave.ripplecir.level4 .circle {
border-color: #2da7e0;
}
@keyframes circle-opacity{
from {
opacity: 1;
transform: scale(0);
}
to {
opacity: 0;
transform: scale(1);
}
}
/* 水波纹效果 结束 */
7.div边缘发光
@-webkit-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(255, 56, 10, .2), inset 0 0 5px rgba(255, 56, 10, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(255, 56, 10, .6), inset 0 0 10px rgba(255, 56, 10, .4), 0 2px 0 #000;
}
}
@-moz-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(255, 56, 10, .2), inset 0 0 5px rgba(255, 56, 10, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(255, 56, 10, .6), inset 0 0 10px rgba(255, 56, 10, .4), 0 2px 0 #000;
}
}
@-o-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(255, 56, 10, .2), inset 0 0 5px rgba(255, 56, 10, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(255, 56, 10, .6), inset 0 0 10px rgba(255, 56, 10, .4), 0 2px 0 #000;
}
}
@-ms-keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(255, 56, 10, .2), inset 0 0 5px rgba(255, 56, 10, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(255, 56, 10, .6), inset 0 0 10px rgba(255, 56, 10, .4), 0 2px 0 #000;
}
}
@keyframes glow {
0% {
border-color: #393;
box-shadow: 0 0 5px rgba(255, 56, 10, .2), inset 0 0 5px rgba(255, 56, 10, .1), 0 2px 0 #000;
}
100% {
border-color: #6f6;
box-shadow: 0 0 20px rgba(255, 56, 10, .6), inset 0 0 10px rgba(255, 56, 10, .4), 0 2px 0 #000;
}
}
.myDiv {
background: darkcyan;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
animation: glow 3s linear infinite;
width: 100px;
height: 100px;
background: #000;
}
8. 水平滚动动画
.activity-roll {
padding-right: 20rpx;
white-space: nowrap;
position: fixed;
left: 780rpx;
z-index: 1000;
animation: rolltext 18s linear 0s infinite;
background: rgba(0, 0, 0, 0.3);
border-radius: 22rpx;
font-size: 32rpx;
color: #ffda9d;
box-sizing: border-box;
}
@keyframes rolltext {
0% {
transform: translateX(0rpx);
}
100% {
transform: translateX(-1800rpx);
}
}