0
這是我第一次在這裏問一個問題，所以請告訴我我做錯了什麼。同時動畫和過渡？
所以我試圖做一個網站，我有按鈕來在頁面加載飛行，然後他們會彈出（縮放更大），當我把鼠標懸停。已經過了2天，我仍然無法找到如何去做的答案。當我使用「向前」填充模式使用動畫時，懸停在動畫之後不起作用。當我使用轉換時，它不會在頁面加載時觸發。同時每個按鍵都會有來自另外一個.06s延遲，當他們在飛
感謝
代碼：。（這是我走到這一步，我用java腳本生成的按鈕，並計算它們的初始位置。）
<!DOCTYPE html>
<html>
<head data-gwd-animation-mode="quickMode">
\t <title id="title">Jack's Desk</title>
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
\t <meta name="generator" content="Google Web Designer 1.3.2.0521">
\t <style type="text/css">
\t \t html, body {
\t \t width: 100%;
\t \t height: 100%;
\t \t margin: 0px;
\t \t }
\t \t .backgroundImg {
\t \t position: absolute;
\t \t width: 100%;
\t \t height: auto;
\t \t }
\t \t .mainDiv {
\t \t position: absolute;
\t \t width: 100%;
\t \t height: 100%;
\t \t }
\t </style>
</head>
<body>
\t
\t <div id="mainDiv" class="mainDiv">
\t </div>
\t
\t <script style="">
\t \t const OPACITY = 0.8;
\t \t const TRANSITION_TIME = .4;
\t \t const ANIMATION_TIME = 1.1;
\t \t //For the fly in function.
\t \t var index = 0;
\t \t var delay = 0;
\t \t
\t \t for (var i = 0; i < 60; i++) {
\t \t \t var theButton = document.createElement("Button");
\t \t \t document.getElementById("mainDiv").appendChild(theButton);
\t \t \t theButton.innerText = "Hola number " + i;
\t \t \t theButton.style.position = "fixed";
\t \t \t theButton.style.left = Math.random() * window.innerWidth + "px";
\t \t \t theButton.style.top = Math.random() * window.innerHeight + "px";
\t \t \t flyIn(theButton, 0.06);
\t \t }
\t \t
\t \t function flyIn(element, additionalDelay) {
\t \t \t var elementTop = element.offsetTop;
\t \t \t var elementLeft = element.offsetLeft;
\t \t \t var centerX = window.innerWidth/2;
\t \t \t var centerY = window.innerHeight/2;
\t \t \t var angle = Math.atan2(centerY - elementTop, elementLeft - centerX);
\t \t \t var newTop = - Math.sin(angle) * 390;
\t \t \t var newLeft = Math.cos(angle) * 390;
\t \t \t var newStyle = document.createElement("Style");
\t \t \t newStyle.type = "text/css";
\t \t \t newStyle.innerHTML = ".label" + index
\t \t \t \t + "{opacity:0; -webkit-animation: flyin" + index + " 1.2s forwards; -webkit-animation-delay:" + delay + "s}"
\t \t \t \t + "\n.label" + index + ":hover {-webkit-transform: scale(1.5, 1.5); opacity: 1.0;}"
\t \t \t \t + "\[email protected] flyin" + index + "{\nfrom{\n-webkit-transform: translate(" + newLeft + "px, " + newTop + "px) scale(3, 3);\n opacity: 0}"
\t \t \t \t + "\nto{\n-webkit-transform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY +"\n}"
\t \t \t \t ;
\t \t \t document.getElementsByTagName("head")[0].appendChild(newStyle);
\t \t \t element.className = "label" + index;
\t \t \t
\t \t \t delay += additionalDelay;
\t \t \t index++;
\t \t }
\t </script>
</body>
</html>
你可以添加你有什麼代碼嗎？我們需要了解你有什麼動畫/過渡。 – ryachza
添加您的代碼... –
好吧，我添加了代碼。 –