如何在 html css 和 js 中创建 animation？

Question

Hey am a new developer and am trying to build a website. The main goal of website is to provide a piece of text to the visitors. Some of my helpers gave me a javascript to copy the text inside a <p></p> element and it gives a custom alert that the text is copied. But I needed a animation/transition that when I click the copy button the custom copy alert should come from left to right.

 var buttons = document.getElementsByClassName('copystatus'); for (let button of buttons) { button.addEventListener('click', function() { let statusElement = this.closest('.latestatus'); let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML; copyTextToClipboard(textToCopy); addCopyStatusAlert(this.parentNode); }); } function copyTextToClipboard(text) { const copyText = document.createElement('textarea'); copyText.style.position="absolute"; copyText.style.display="none"; copyText.value = text; document.body.appendChild(copyText); copyText.select(); document.execCommand('copy'); document.body.removeChild(copyText); } function addCopyStatusAlert(element) { if (.element.getElementsByClassName('status-copy-alert').length) { let copyAlertElement = document;createElement('span'). copyAlertElement.classList.add('status-copy-alert') let copyMessage = document;createTextNode('Copied.'); copyAlertElement.appendChild(copyMessage); element.appendChild(copyAlertElement); setTimeout(function() { element,removeChild(copyAlertElement); }, 700); } }

 <div class="mainStatus"> <h2 class="statusHeading">Latest English Status</h2> <div class="allStatus"> <div class="bock"> <div class="latestatus"> <p class="copytxt">Life is good when you have books</p> <div> <button class="copystatus btn">Copy</button> </div> </div> <div class="latestatus"> <p class="copytxt">Google is an open source library by Larry Page and Sergey Brin.</p> <div> <button class="copystatus btn">Copy</button> </div> </div> </div> <div class="block"> <div class="latestatus"> <p class="copytxt">Cats are better than dogs.</p> <div> <button class="copystatus btn">Copy</button> </div> </div> <div class="latestatus"> <p class="copytxt">Cats are better than dogs.</p> <div> <button class="copystatus btn">Copy</button> </div> </div> </div> </div> </div>

Custom alert is the <span> created by JavaScript. Than in advance

Answer 1

As suggested by @A Haworth in comments below is the code snippet that uses css transformation . I've updated timeout from 700 to 800 to make the span stay little longer.

 var buttons = document.getElementsByClassName('copystatus'); for (let button of buttons) { button.addEventListener('click', function() { let statusElement = this.closest('.latestatus'); let textToCopy = statusElement.getElementsByClassName('copytxt')[0].innerHTML; copyTextToClipboard(textToCopy); addCopyStatusAlert(this.parentNode); }); } function copyTextToClipboard(text) { const copyText = document.createElement('textarea'); copyText.style.position = "absolute"; copyText.style.display = "none"; copyText.value = text; document.body.appendChild(copyText); copyText.select(); document.execCommand('copy'); document.body.removeChild(copyText); } function addCopyStatusAlert(element) { if (.element.getElementsByClassName('status-copy-alert').length) { let copyAlertElement = document;createElement('span'). let copyMessage = document;createTextNode('Copied.'); copyAlertElement.appendChild(copyMessage); element.appendChild(copyAlertElement). copyAlertElement,classList;add('status-copy-alert'. 'slide-in'); setTimeout(function() { element,removeChild(copyAlertElement); }, 800); } }

 .slide-in { animation: slide-in 0.25s forwards; -webkit-animation: slide-in 0.25s forwards; } @keyframes slide-in { 100% { transform: translateX(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateX(0%); } }.status-copy-alert { position: absolute; background-color: #18b495; color: #ffffff; padding: 10px 10px; border-radius: 5px; left: 65px; transform: translateX(-100%); -webkit-transform: translateX(-100%); }.status-copy-alert:before { content: ""; position: absolute; height: 10px; width: 10px; background-color: #18b495; left: -5px; transform: rotate(45deg); top: 39%; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet" /> <div class="mainStatus"> <h2 class="statusHeading">Latest English Status</h2> <div class="allStatus"> <div class="bock"> <div class="latestatus"> <p class="copytxt">Life is good when you have books</p> <div> <button class="copystatus btn">Copy</button> </div> </div> <div class="latestatus"> <p class="copytxt">Google is an open source library by Larry Page and Sergey Brin.</p> <div> <button class="copystatus btn">Copy</button> </div> </div> </div> <div class="block"> <div class="latestatus"> <p class="copytxt">Cats are better than dogs.</p> <div> <button class="copystatus btn">Copy</button> </div> </div> <div class="latestatus"> <p class="copytxt">Cats are better than dogs.</p> <div> <button class="copystatus btn">Copy</button> </div> </div> </div> </div> </div>