堆棧內存溢出
  簡體   English   中英

在不改變div位置的情況下替換css動畫

[英]replace css animation without changing the position of the div

 原文  2016-04-18 15:53:28  7   3    javascript/ jquery/ html/ css/ css3

問題描述

這是我的代碼

https://jsfiddle.net/sameh0/hgk2uLfk/2/

當我將rightleft懸停在div上時，我想改變rightleft動畫。 然而，當我這樣做時，div的位置首先返回，然后更改動畫，這會產生不良的交互體驗。

話雖如此，我願意添加任何JS / JQuery代碼。

目前當div懸停時，它停在其初始位置並且發生新的動畫bubble 。

我的目標是：讓div停在它的當前位置，並在div停止時開始新的動畫bubble 。

這是代碼HTML 

<div class="circle"></div>

CSS 

 .circle{
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  z-index: 100;
  cursor: pointer;
  top:25%;
   left :28%;
  width: 90px;
  height: 90px;
  -webkit-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) , bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
background-color:blue;
  background-size: 80%;
}
.circle:hover{
  background-color:red;
   -webkit-animation: bubble, 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  -moz-animation: bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  animation:  bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
}

@-webkit-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-moz-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-ms-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}
@-webkit-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-moz-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-ms-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

3 個解決方案

解決方案1
 4 已采納  2016-04-18 17:29:25

以下代碼怎么樣？ 

.circle{
  background-color:blue;
  animation:
    rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),
    bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
}

.circle:hover{
  background-color:red;
  animation:
    rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),
    bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21);
  animation-play-state: paused, running;
}

@keyframes rightleft {
  0% {
    margin-top: 0px;
    margin-left: 0px;
  }
  100% {
    margin-left: -100px;
    margin-top: -100px;
  }
}

@keyframes bubble {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1.1);
  }
}

DEMO

解決方案2
 1  2016-04-18 16:59:57

https://jsfiddle.net/hgk2uLfk/10/

更新 

<div class="circle">
  <div class="bubble"></div>
</div>



.circle{
  position: absolute;
  z-index: 100;
  top:25%;
  left :28%;
  -webkit-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) , bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -moz-animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955);
  animation: rightleft 2.5s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955),bubble 2s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955) ;
}

.circle:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.bubble {
  width: 90px;
  height: 90px;
  cursor: pointer;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background-color:blue;
  background-size: 80%;
}

.bubble:hover{
  background-color:red;
  -webkit-animation: bubble, 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  -moz-animation: bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
  animation:  bubble 0.8s infinite alternate  cubic-bezier(0.46, 0.03, 1, 0.21) !important;
}

@-webkit-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-moz-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@-ms-keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}

@keyframes rightleft {
  0% {
  margin-top: 0px;
  margin-left: 0px;
  }

  100% {
    margin-left: -30px;
    margin-top: -30px;
  }
}
@-webkit-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-moz-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@-ms-keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

@keyframes bubble {
  0% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    transform: scale(1.1);
  }
}

解決方案3
 0  

將此代碼添加到以前的代碼中它將起作用 

.circle:hover {
animation-name: rightleft;
animation-play-state: paused;
}

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 通過改變css top在div動畫中垂直滾動 調整 div 的大小而不改變邊的 position jQuery在位置.animation（..）之后通過.css（..）將div位置更改 替換div的內容而不更改大小或滾動 在不凍結動畫的情況下更改css線性漸變動畫 CSS動畫：使用相對於前一個的新位置移動div 用動畫交換div位置 使用Java更改以％為單位給出的CSS Div位置值 如何通過使用JavaScript更改CSS值來​​移動/放置DIV容器？ 如何在不更改 position 的情況下將 div 和 dl 包裝在 js 中
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM