动画

最新推荐文章于 2023-09-01 18:56:18 发布

小风儿

最新推荐文章于 2023-09-01 18:56:18 发布

阅读量340

点赞数

CC 4.0 BY-SA版权

分类专栏： css

本文链接：https://blog.youkuaiyun.com/littlewindy520/article/details/103672848

css 专栏收录该内容

5 篇文章

订阅专栏

文章目录

1. 弹出层
2. flex
3. 连续动画
4.Vue动画
- 4.1动画
5. 关键帧动画
6. 水波纹效果
7.div边缘发光
8. 水平滚动动画

1. 弹出层

<!-- 动画 start -->
  <view class="setting__options--toUp {{active_num==1?'toUp':'toUpBack'}}">
    底部弹出
  </view>
 <!-- 动画 end -->
 
/* 底部弹出 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;
}
<view class='three__btn flex justify-content' catchtap="get_search">
    <view class='flex-1 three__btn--item three__btn--1 {{ active_num == 1 ? "flex-2" : ""}}' data-id="1" >
      <text class='tree__title' data-id="1">衰弱株</text>
    </view>
    <view class='flex-1 three__btn--item three__btn--2 {{ active_num == 2 ? "flex-2" : ""}}' data-id="2" >
      <text class='tree__title' data-id="2">濒危株</text>
    </view>
    <view class='flex-1 three__btn--item three__btn--3 {{ active_num == 3 ? "flex-2" : ""}}' data-id="3">
      <text class='tree__title' data-id="3">正常株</text>
    </view>
  </view>
  
  // 类型选项
  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;
}
-----------------------------------------------
 <div class="dtzl flex dtzlBottom">
    <div v-for="(item,index) in dtzl.bottomList"
         :key="index"
         class="dtzlBottomItem"
         :style="{ flex: item.num,background: item.bg }"
    >
        <div :class="[index % 2 === 0 ? 'dtzlBottomItemDescUp' : 'dtzlBottomItemDescDown']">
            <span>{{item.desc}}</span>
            <span :style="{ color: item.color }">{{item.num}}</span>
            <span>次</span>
        </div>
        <div :style="{ background: item.bg }"
             style="width:100%;"
        ></div>
    </div>
</div>

3. 连续动画

.rightToLeft{
  animation: rightToLeft 5s linear 0s infinite alternate;
}
@keyframes rightToLeft{
  0%{
    left:572rpx;
    top:2262rpx;
  }
  100%{ 
    left:516rpx;
    top:2195rpx;
  }
}

4.Vue动画

<transition
  mode="out-in"
  name="custom"
  enter-active-class="animated fadeInDown"
  leave-active-class="animated fadeOutUp"
  :duration="800"
  >

</transition>

4.1动画

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>
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;
    }
}

<div class="myDiv"></div>
<script type="text/javascript">
    var bg =document.getElementsByClassName("myDiv")[0];
    var timer = setInterval(function(){
        bg.style.background = this.randColor();
    },500)
    
    function randColor() {
        var r = Math.floor(Math.random() * (250 - 0 + 1) + 0);
        var g = Math.floor(Math.random() * (250 - 0 + 1) + 0);
        var b = Math.floor(Math.random() * (250 - 0 + 1) + 0);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
</script>

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