We Keep Coding

transition works only with keyframes

I am trying to transition the content of a card in vue3. This code does not work as expected:
template>
<q-card class="q-pa-md">
<q-card-section>
<div class="fade text-h6 ">{{ props.article.title }}</div>
<q-separator inset></q-separator>
</q-card-section>
<q-card-section class="fade">{{ article.description }}</q-card-section>
</q-card>
</template>
<script setup>
const props = defineProps({
article: Object,
});
</script>
<style scoped>
.fade {
opacity: 1;
transition: opacity 1s ease-in-out;
}
But this code, involving keyframes does
toggled {
animation: fadeIn 2s;
}
#keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
don't mind the change of the class name. Could someone pin down the reasons for this behaviour. Thank you for your time.

Animation-fill-forwards not working with hover selector

I wanted to have an image fade permanently until the user refreshes the page, and I was able to do so with animation-fill forwards. However, I would like this animation to initiate only when you hover over it.
I am able to make an image fade with hover independently, but it resets after the user moves their cursor from the element. In short, I am unable to make the transition and the hover effect work in conjunction.
Here is the HTML
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>
Here is the CSS
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
top: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
This is the codepen to my project: https://codepen.io/narutofan389/collab/LYpxqmY
Much obliged for your help.

:hover state only applies when it is hovered, so it will not persist. I would recommend toggling a class on mouseenter via javascript. I've attached a fiddle to accomplish what you're intending. Let me know if you need any clarity. :)
document.addEventListener("DOMContentLoaded", function() {
var img = document.getElementById("hill");
img.addEventListener("mouseenter", function() { img.classList.add("hide")});
});
body {
height:1000px;
}
#hill {
position: relative;
height: 100vh;
}
#-webkit-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-moz-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#-o-keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
#hill.hide {
-webkit-animation: fade 5s;
-moz-animation: fade 5s;
-o-animation: fade 5s;
animation: fade 5s;
animation-fill-mode: forwards;
}
<div class="hill">
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">
</div>

You can consider animation-play-state and have the animation defined on the element initially but the duration need to be short because it won't work if the user rapidly move the mouse
#hill {
position: relative;
height: 100vh;
animation: fade 0.5s paused forwards;
}
#hill:hover {
animation-play-state:running;
}
#keyframes fade {
0% { opacity: 1; }
100% { opacity: 0; }
}
<img id="hill" src="https://i.postimg.cc/rw48gd3R/hillary.png">

How to make the animation on a website where a piece of text changes every seconds?

It's like the animation they have on npm front page and also on the brown hackathon page. Where a piece of text erases and appears every few seconds with different content. I think There may be an existing template for it online, but what do they call it?

This is basic idea how to create this kind of animation check following snippet:
If you want to expend this animation just add letters in array.
$(function() {
var arr = ['t','te','tex','text','G','Go','Goo','Goog','Googl','Googl','Google'];
var elem = $('#ani');
var i = 0;
var loop = function(){
elem.text(arr[i++]);
if(i>arr.length) {
//clearInterval(intervalID);
i=0;
}
}
var intervalID = setInterval(loop, 500);
})
.test{
font-size:26px;
color:green;
}
.ani{
color:red;
}
.ani::after{
content:"|";
-webkit-animation: cursor-blink 0.8s linear infinite;
-moz-animation: cursor-blink 0.8s linear infinite;
-o-animation: cursor-blink 0.8s linear infinite;
animation: cursor-blink 0.8s linear infinite;
}
#-moz-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#-o-keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
#keyframes cursor-blink {
1% {
opacity: 0;
}
40% {
opacity: 0;
}
60% {
opacity: 1;
}
100% {
opacity: 1;
}
}
<div class="test">
This is text
<span class="ani" id="ani">
Google
</span>
</div>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Dynamic word swapping animation

I'm trying to create an animation for text on a page that, every few seconds, changes one word out with another word from a list. Example: I have a header that says, "This is cool," but I want "cool" to be replaced every few seconds by "neat/awesome/groovy/etc".
I'm honestly not sure the best way to go about this (in terms of what technology to use) and I can't find a blurb of code that works with modern browsers. Help is greatly appreciated!

in Pure JS
http://jsfiddle.net/M5gxH/3/
<script>
var words = ["neat", "great", "best", "groovy"];
var i = 0;
var text = "This is cool";
function _getChangedText() {
i = (i + 1) % words.length;
console.log(words[i]);
return text.replace(/cool/, words[i]);
}
function _changeText() {
var txt = _getChangedText();
console.log(txt);
$("#changer").text(txt);
}
setInterval("_changeText()", 1000);
</script>
<span id="changer">This is cool</span>

In jQuery, I'd do something like this:
http://jsfiddle.net/6SRaB/1/
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() { // on document load
changer();
});
function changer() {
var words = ["nifty","groovy","far out"]; // add as many as you like
var idx = Math.floor(words.length * Math.random()); // randomizer
$('#change').text(words[idx]); // replaces the contents of "change"
var time = Math.floor(5000 * Math.random() + 3000); // in milliseconds
setTimeout(changer,time); // lather, rinse, repeat
}
</script>
...
<h2>This is <span id="change">cool</span></h2>
The key is to use a SPAN tag with an ID that you can pick out quickly.

This question is quite old but it showed up in a google search for me. In 2018 you can easily implement this behavior with CSS Animations without the need for any additional JavaScript code.
The following should give you what you need:
<!DOCTYPE html>
<html>
<head>
<style>
.animated{
display: inline;
text-indent: 8px;
}
.animated span{
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
color: red;
opacity: 0;
overflow: hidden;
position: absolute;
}
.animated span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.animated span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.animated span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.animated span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
#-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
#-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<h2>CSS Animations are
<div class="animated">
<span>cool.</span>
<span>neat.</span>
<span>awesome.</span>
<span>groovy.</span>
<span>magic.</span>
</div>
</h2>
</body>
</html>
Note that this is just an example with vertical sliding. There are basically endless possibilities with CSS in terms of animations/transitions.

How to pause and resume CSS3 animation using JavaScript?

I've tried to google and look from this forum a solution for my problem but no luck so far. I would like to pause my CSS3 animation (image slide show) by clicking a picture and also resume to the same animation by clicking a picture.
I know how to pause the slide show and I was also able to resume it once, but then it stops working if try to pause and resume more than one time. Here is how my code looks like:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.pic {
position: absolute;
opacity: 0;
}
#pic1 {
-webkit-animation: pic1 4s infinite linear;
}
#pic2 {
-webkit-animation: pic2 4s infinite linear;
}
#-webkit-keyframes pic1 {
0% {opacity: 0;}
5% {opacity: 1;}
45% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;}
}
#-webkit-keyframes pic2 {
0% {opacity: 0;}
50% {opacity: 0;}
55% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;}
}
</style>
<script type="text/javascript">
function doStuff(){
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
pic1.style.webkitAnimationPlayState="paused";
pic2.style.webkitAnimationPlayState="paused";
pic1.onclick = function(){
pic1.style.webkitAnimationPlayState="running";
pic2.style.webkitAnimationPlayState="running";
}
pic2.onclick = function(){
pic1.style.webkitAnimationPlayState="running";
pic2.style.webkitAnimationPlayState="running";
}
}
</script>
</head>
<body>
<img id="pic1" class="pic" src="photo1.jpg" />
<img id="pic2" class="pic" src="photo2.jpg" onclick="doStuff()" />
</body>
</html>
I don't want to use any JS libraries (e.g. jQuery) or any other external solution.
My guess is that my functions inside doStuff function are still running and that's why pause and resume works only once.
Is there a way to clear these functions after I have clicked them once? Or am I trying to do this in a totally wrong way? Help is appreciated. :)

I find it easier to do it with a css class. With it, you can use prefixes for every browser.
.paused{
-webkit-animation-play-state:paused;
-moz-animation-play-state:paused;
-o-animation-play-state:paused;
animation-play-state:paused;
}
Then you only have to add or remove this class to your animated element yo pause / resume the animation.

Here is a solution using javascript:
var imgs = document.querySelectorAll('.pic');
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = toggleAnimation;
imgs[i].style.webkitAnimationPlayState = 'running';
}
function toggleAnimation() {
var style;
for (var i = 0; i < imgs.length; i++) {
style = imgs[i].style;
if (style.webkitAnimationPlayState === 'running') {
style.webkitAnimationPlayState = 'paused';
document.body.className = 'paused';
} else {
style.webkitAnimationPlayState = 'running';
document.body.className = '';
}
}
}
.pic {
position: absolute;
opacity: 0;
}
#pic1 {
-webkit-animation: pic1 4s infinite linear;
}
#pic2 {
-webkit-animation: pic2 4s infinite linear;
}
#-webkit-keyframes pic1 {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes pic2 {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
55% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.paused {
background-color: #ddd;
}
<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff">
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">
jQuery solution (shorter and more readable):
var imgs = $('.pic'),
playState = '-webkit-animation-play-state';
imgs.click(function() {
imgs.css(playState, function(i, v) {
return v === 'paused' ? 'running' : 'paused';
});
$('body').toggleClass('paused', $(this).css(playState) === 'paused');
});
.pic {
position: absolute;
opacity: 0;
}
#pic1 {
-webkit-animation: pic1 4s infinite linear;
}
#pic2 {
-webkit-animation: pic2 4s infinite linear;
}
#-webkit-keyframes pic1 {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
45% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 0;
}
}
#-webkit-keyframes pic2 {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
55% {
opacity: 1;
}
95% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.paused {
background-color: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="pic1" class="pic" src="http://placehold.it/200x200/ff0000/ffffff">
<img id="pic2" class="pic" src="http://placehold.it/200x200/ff00ff/ffffff">

This is to extend the answer given by Luis Hijarrubia
.pause {
-webkit-animation-play-state: paused !important;
-moz-animation-play-state: paused !important;
-o-animation-play-state: paused !important;
animation-play-state: paused !important;
}
In my page I was triggering the change of class from the parent element. All I wanted to do was rotate the image inside. But it seems that because I was not using the hover, the adding of the paused class made no difference to the animation state.
The use of !important ensured that these values were overwritten by the new added CSS values.

var e = document.getElementsById("Your_Id");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);
function listener(e) { alert("Your POSITION parameter:" + .target.style.position);
switch(e.type) {
case "animationstart":
d = "Started: elapsed time is " + e.elapsedTime;
break;
case "animationend":
d = "Ended: elapsed time is " + e.elapsedTime;
break;
case "animationiteration":
d= "New loop started at time " + e.elapsedTime; alert("pausing for 1 seconddddddd!!!!!!!"); e.target.style.animationPlayState = "paused"; window.setTimeout(function(){e.target.style.animationPlayState = "running";}, 1000);
break;
}
}

I havent tested it but perhaps something like this?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.pic { position: absolute;opacity: 0; }
.pic1 { -webkit-animation: pic1 4s infinite linear; }
.pic2 { -webkit-animation: pic2 4s infinite linear; }
#-webkit-keyframes pic1 { 0% {opacity: 0;}
5% {opacity: 1;}
45% {opacity: 1;}
50% {opacity: 0;}
100% {opacity: 0;} }
#-webkit-keyframes pic2 { 0% {opacity: 0;}
50% {opacity: 0;}
55% {opacity: 1;}
95% {opacity: 1;}
100% {opacity: 0;} }
</style>
<script type="text/javascript">
function doStuff(){
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
pic1.className="pic paused";
pic2.className="pic paused";
pic1.onclick = function(){
pic1.className="pic pic1";
pic2.className="pic pic2";
}
pic2.onclick = function(){
pic1.className="pic pic1";
pic2.className="pic pic2";
}
}
</script>
</head>
<body>
<img id="pic1" class="pic pic1" src="photo1.jpg" />
<img id="pic2" class="pic pic2" src="photo2.jpg" onclick="doStuff()" />
</body>
</html>