色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

如何跨多個元素同步CSS動畫？

CSS
錢衛國2年前8瀏覽0評論

我在一個頁面上有兩個元素，我想通過CSS動畫(具體來說，-webkit-animation)。動畫本身只是簡單地上下跳動一個元素。一個元素總是顯示和跳動，另一個直到鼠標懸停時才顯示動畫。

我的問題是:是否可以同步(讓兩個元素同時到達頂點，等等)兩個元素之間的動畫，而不管第二個元素的動畫何時開始？

這是我的HTML:

<div id="bouncy01">Drip</div>
<div id="bouncy02">droP</div>

和我的CSS:

@-webkit-keyframes bounce {
    0% {-webkit-transform: translateY(0px);}
    25% {-webkit-transform: translateY(-2px);}
    50% {-webkit-transform: translateY(-4px);}
    75% {-webkit-transform: translateY(-2px);}
    100% {-webkit-transform: translateY(0px);}
}
#bouncy01,
#bouncy02 {
    margin:10px;
    float: left;
    background: #ff0000;
    padding: 10px;
    border: 1px solid #777;
}
#bouncy01 {
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate;
}
#bouncy02 {
    background: #ffff00;
}
#bouncy02:hover {
    -webkit-animation:bounce 0.25s ease-in-out infinite alternate;
}

最后，這個問題的一個工作演示:http://jsfiddle.net/7ZLmq/2/

(要查看問題，請將鼠標懸停在黃色塊上)

我不認為這在本質上是可能的，但是你實際上可以通過使用彈跳包裝器和一些位置改變來破解類似的功能

html:

<div id="bouncywrap">
    <div id="bouncy01">Drip</div>
    <div id="bouncy02">droP</div>
<div>

CSS:

@-webkit-keyframes bounce {
    0% { padding-top:1px;}
/* using padding as it does not affect position:relative of sublinks
 * using 0 instead of 0 b/c of a box-model issue,
 * on kids wiht margin, but parents without margin, just try out
 */
    50% { padding-top:5px;} /*desired value +1*/
    100% { padding-top:1px;}
}

#bouncy01,
#bouncy02 {
    margin:10px;
    background: #ff0000;
    padding: 10px;
    border: 1px solid #777;
    width:30px;
       position:absolute;
}
#bouncywrap {
    -webkit-animation:bounce 0.125s ease-in-out infinite;
    position:relative;
    width:140px;
    height:50px;
/*    background:grey; /*debug*/
}
#bouncy02 {
    background: #ffff00;
    left:60px;
    top:2px; /*half of desired value, just a fix for the optic*/
}
#bouncy02:hover {
    position:relative; /*here happens the magic*/
    top:0px;
}

演示http://jsfiddle.net/A92pU/1/

網絡動畫API現在允許非常精確和非常容易地控制動畫。

有各種方法來聲明一個網絡動畫，但是因為這里我們從CSS開始，這里是如何掛鉤到它:

// when the animation starts
document.querySelector("#bouncy02")
  .addEventListener("animationstart", (evt) => {
  // double check it the animation we wanted
  if (evt.animationName === "bounce") {
    // retrieve both Animation objects
    const myAnim = findAnimByName(evt.target, "bounce");
    const otherAnim = findAnimByName(document.querySelector("#bouncy01"), "bounce");
    // update mine to act as if it started
    // at the same time as the first one
    myAnim.startTime = otherAnim.startTime;
  }
});
// simple helper to find an Animation by animationName
function findAnimByName(elem, name) {
  // get all the active animations on this element
  const anims = elem.getAnimations();
  // return the first one with the expected animationName
  return anims.find((anim) => anim.animationName === name);
}

@keyframes bounce {
    0% {transform: translateY(0px);}
    25% {transform: translateY(-2px);}
    50% {transform: translateY(-4px);}
    75% {transform: translateY(-2px);}
    100% {transform: translateY(0px);}
}
#bouncy01,
#bouncy02 {
    margin:10px;
    float: left;
    background: #ff0000;
    padding: 10px;
    border: 1px solid #777;
}
#bouncy01 {
    animation:bounce 0.25s ease-in-out infinite alternate;
}
#bouncy02 {
    background: #ffff00;
}
#bouncy02:hover {
    animation:bounce 0.25s ease-in-out infinite alternate;
}

<div id="bouncy01">Drip</div>
<div id="bouncy02">droP</div>

我在尋找此處建議的替代解決方案，因為:

我正在制作一個背景色的動畫——這個背景色不能使用公認答案中的定位魔法。 我想在我的應用程序中避免計算一個非常簡單的動畫。 經過進一步的研究，我看到了bealearts的這個模塊。

它公開了一個非常簡潔的API，讓你通過引用它的名字來保持動畫在應用程序中的同步:

import sync from 'css-animation-sync';
sync('spinner');

由于這似乎有點好得不像是真的，我在這個小提琴中測試了庫(這是一個單獨的短文件)，并很高興地報告它的工作(懸停在第三個圖像上，可以看到我很快同步到第二個圖像的動畫):)。

鳴謝:我使用了Simurai這把小提琴的動畫作為我這把小提琴的基礎。

如果有人想復制這種同步背后的機制，代碼是開放的，但本質上，它使用動畫本身的事件偵聽器作為同步點:

window.addEventListener('animationstart', animationStart, true);
window.addEventListener('animationiteration', animationIteration, true);

希望這能幫助下一個尋找解決這個問題的人。

添加類別前計算并添加延遲:

function getTime (seconds) {
  const msDuration = (seconds * 1000).toFixed(0);
  const currentTime = (new Date()).getTime();
  const msDelay = msDuration - (currentTime % msDuration);
  return (msDelay / 1000).toFixed(4);
}

$('div').css({animationDelay: getTime(0.6) + "s"}).addClass('animating');

https://codepen.io/s-flhti/pen/GRoVXZw

看起來你可以把兩個黃色的堆疊起來并打開可見性:懸停在一個父元素上。

你需要動畫一直運行，否則你會遇到同步問題。

我稍微修改了一下你的代碼來得到這個。

您可以使用setInterval來保持第一個動畫的動畫狀態，并給另一個動畫一個負延遲，以便在鼠標懸停時找到其匹配的關鍵幀。

在“操作CSS動畫”一節，閱讀關于狀態維護間隔的內容；在此閱讀有關負延遲的信息。

這是我在同步不同元素和偽元素的動畫時的小小探索，由于上面的想法，解決方案變得非常簡單。希望這個小代碼對某人有幫助。

window.addEventListener('animationstart', e =>
    e.animationName == 'rgb' && e.target.getAnimations({subtree: true}).forEach(e => e.startTime = 0), true)

鼠標懸停時:

從兩個元素中移除動畫類 使用requestAnimationFrame(()= & gt；{ ...在這里將“反彈”類添加到兩個元素}) 應該同步得很好。

您可以在根元素上設置一個類來設置交替狀態，然后使用一個計時器來交替這個類

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.alt .bouncy {
   padding-top:5px !important;
}
.bouncy {
   padding-top: 1px;
   transition: padding-top ease 500ms;
}

超文本標記語言

<div class="container">
    <div class="bouncy">Drip</div>
    <div class="bouncy">droP</div>
<div>

java描述語言

$(function () {
  setInterval(() => $(".container").toggleClass("alt"), 1000)
})

通過這種方式，過渡和計時器完成css動畫的工作，但由單個主開關(容器)控制。

有了bealearts的css動畫同步庫，你可以很容易地同步動畫。但是在0.4.1版本(今天的最新版本)中，它有一些錯誤:

同步丟失，當所有同步動畫元素停止時，它們會顯示動畫(例如顯示:無) 重新啟動后，第一個動畫從非零幀開始，這可能很關鍵。 第一個動畫開始一段時間后，它會閃爍。 不使用偽元素:before，:after 要修復所有這些錯誤(除了4個)，您可以修復庫代碼:

-添加動畫-取消回調

function animationCancel(event) {
    if (shouldSync(event)) {
      elements.delete(event.target);
    }
}
window.addEventListener('animationcancel', animationCancel, true);

-修改動畫-開始回調以處理第一個動畫

function animationStart(event) {
    if (shouldSync(event)) {
      const { target: element, timeStamp } = event;
      elements.add(element);

      let diff;
      if (elements.size == 1){
        diff = 0;
        lastIterationTimestamp = timeStamp;
      }else diff = timeStamp - lastIterationTimestamp;

      element.style.setProperty('animation-delay', `-${diff}ms`);
    }
}

-并清空init()方法的主體。

下面是固定使用示例:

//Sample demo code
jQuery(function($){
  window.cssAnimationSync('pulse-visible');
  let animateGroup = function(selector){
    let hideNext = function(){
      let next = $(selector + ':visible:first');
      if (next.length){
          next.fadeOut();
          setTimeout(hideNext, 200 + Math.random()*200);
       }else setTimeout(showNext, 200 + Math.random()*200);
    }
    let showNext = function(){
       let next = $(selector + ':hidden:first');
       if (next.length){
          next.fadeIn();
          setTimeout(showNext, 200 + Math.random()*200);
       }else setTimeout(hideNext, 200 + Math.random()*200);
    };
    showNext();
  };
  animateGroup('.pulsar_sync');
  animateGroup('.pulsar');
});


//Fixed library code
/** @see https://github.com/bealearts/css-animation-sync */
window.cssAnimationSync = function(animationNameOrNames) {
  const animationNames = new Set(
    Array.isArray(animationNameOrNames) ? animationNameOrNames : [animationNameOrNames]
  );
  const elements = new Set();
  let animationDuration;
  let isPaused = false;
  let lastIterationTimestamp = 0;

  const api = {
    getElements() {
      return elements;
    },

    free() {
      window.removeEventListener('animationiteration', animationIteration, true);
      window.removeEventListener('animationstart', animationStart, true);

      this.start();
      elements.clear();
    },

    start() {
      elements.forEach((el) => {
        if (validate(el)) {
          if (isPaused) {
            el.style.removeProperty('animation-play-state');
          } else {
            el.style.removeProperty('animation');
          }
        }
      });
      isPaused = false;
    },

    stop() {
      isPaused = false;
      elements.forEach((el) => {
        if (validate(el)) {
          el.style.setProperty('animation', 'none');
        }
      });
    },

    pause() {
      isPaused = true;
      elements.forEach((el) => {
        if (validate(el)) {
          el.style.setProperty('animation-play-state', 'paused');
        }
      });
    }
  };

  function shouldSync(event) {
    return animationNames.has(event.animationName);
  }

  function validate(el) {
    const isValid = document.body.contains(el);
    if (!isValid) {
      elements.delete(el);
    }
    return isValid;
  }

  function init() {
    //setTimeout(restart, animationDuration);
  }

  function restart() {
    api.stop();
    setTimeout(api.start, 50);
  }

  function animationStart(event) {
    if (shouldSync(event)) {
      const { target: element, timeStamp } = event;
      elements.add(element);

      let diff;
      if (elements.size == 1){
        diff = 0;
        lastIterationTimestamp = timeStamp;
      }else diff = timeStamp - lastIterationTimestamp;

      element.style.setProperty('animation-delay', `-${diff}ms`);
    }
  }
  
  function cssToMs(time) {
      const num = parseFloat(time);
      let unit = time.match(/m?s/);

      if (!unit) return 0;

      [unit] = unit;

      switch (unit) {
        case 's':
          return num * 1000;
        case 'ms':
          return num;
        default:
          return 0;
      }
   }


  function animationIteration(event) {
    if (shouldSync(event)) {
      const { target: element, timeStamp } = event;
      elements.add(element);

      lastIterationTimestamp = timeStamp;
      if (!animationDuration) {
        animationDuration = cssToMs(window.getComputedStyle(element).animationDuration);
        init();
      }
    }
  }

  function animationCancel(event) {
    if (shouldSync(event)) {
      elements.delete(event.target);
    }
  }

  window.addEventListener('animationiteration', animationIteration, true);
  window.addEventListener('animationstart', animationStart, true);
  window.addEventListener('animationcancel', animationCancel, true);

  return api;
};

@keyframes pulse-visible {
    0% { opacity: 0.85;}
    30% { opacity: 0.85;}
    40% { opacity: 0.55;}
    45% { opacity: 0;}
    85% { opacity: 0;}
    90% { opacity: 0.55;}
    100% { opacity: 0.85;}
}

@keyframes pulse-visible-copy {
    0% { opacity: 0.85;}
    30% { opacity: 0.85;}
    40% { opacity: 0.55;}
    45% { opacity: 0;}
    85% { opacity: 0;}
    90% { opacity: 0.55;}
    100% { opacity: 0.85;}
}
.pulsar
{
 animation-name: pulse-visible-copy;
}
.pulsar_sync
{
 animation-name: pulse-visible;
}
.pulsar, .pulsar_sync
{
 animation-duration: 0.7s;
 animation-iteration-count: infinite;
 animation-timing-function: linear;
 
 /*styles not depending on animation*/
 display: inline-block;
 width: 30px;
 height: 30px;
 margin: 5px;
 border: 3px solid red;
 border-radius: 25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
With cssAnimationSync
<div style='min-height:50px;'>
<div class="pulsar_sync" style="display: none;"></div>
<div class="pulsar_sync" style="display: none;"></div>
<div class="pulsar_sync" style="display: none;"></div>
<div class="pulsar_sync" style="display: none;"></div>
<div class="pulsar_sync" style="display: none;"></div>
</div>
Without
<div>
<div class="pulsar" style="display: none;"></div>
<div class="pulsar" style="display: none;"></div>
<div class="pulsar" style="display: none;"></div>
<div class="pulsar" style="display: none;"></div>
<div class="pulsar" style="display: none;"></div>
</div>