<section id="css-keyframes-fill-forward" class="animate-things-wrapper">
<button id="trigger">Trigger</button>
<div id="box" class="box">
Hi there
</div>
</section>
<script src="../../js/components/css-keyframes-fill-forward.js"></script>
<section id="css-keyframes-fill-forward" class="animate-things-wrapper">
<button id="trigger">Trigger</button>
<div id="box" class="box">
Hi there
</div>
</section>
<script src="{{ path '/js/components/css-keyframes-fill-forward.js' }}"></script>
/* No context defined. */
(function () {
document.addEventListener('DOMContentLoaded', function () {
console.log("css-keyframes-fill-forward active");
const button = document.querySelector('#trigger');
const box = document.querySelector('#box');
button.addEventListener('click', function() {
box.classList.toggle('active');
})
});
})();
@keyframes backAndForth {
0% {
transform: none;
transform-origin: center;
}
50% {
transform: translate(-100%, 0);
}
100% {
transform: translate(100%, 0) rotate(-180deg);
}
}
#css-keyframes-fill-forward {
.box {
transform-origin: center;
&.active {
animation: 2s backAndForth ease forwards;
}
}
}
No notes defined.