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>
Related
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.
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">
I have the next problem: I want to crossfade different background images of a <body> tag, with a timer. You can see here an example of what I want to achieve.
The problem is that I'm new to these stuff and can't figure out how to do it...I've seen many post, but they only made me get more confused!
my HTML code:
<body id="one" onload="startTimer()">
<!-- Some other tags -->
</body>
<script type = "text/javascript">
function displayNextImage() {
x = (x === images.length - 1) ? 0 : x + 1;
var url = "url(" + images[x] + ")";
$("#one").css('background-image', url);
}
function startTimer() {
setInterval(displayNextImage, 6000);
}
var images = [], x = -1;
images[0] = "someimage1.jpg";
images[1] = "someimage2.jpg";
images[2] = "someimage3.jpg";
</script>
and my CSS code:
body {
background-image: url("images/forest1.jpeg");
background-size: cover;
}
I'm open to suggestions, I mean, if there's a better way to do these, great! I just want to get the same point as the web shown above!
Thanks in advance!
You don't need any JavaScript, you can achieve it with CSS animations:
body {
background-size: cover;
}
#-webkit-keyframes changeBckg {
0% { background-image: url("https://unsplash.it/1000?image=1080"); }
25% { background-image: url("https://unsplash.it/1000?image=1081"); }
50% { background-image: url("https://unsplash.it/1000?image=1064"); }
75% {background-image: url("https://unsplash.it/1000?image=1078"); }
100% {background-image: url("https://unsplash.it/1000?image=1080"); }
}
#keyframes changeBckg {
0% { background-image: url("https://unsplash.it/1000?image=1080"); }
25% { background-image: url("https://unsplash.it/1000?image=1081"); }
50% { background-image: url("https://unsplash.it/1000?image=1064"); }
75% {background-image: url("https://unsplash.it/1000?image=1078"); }
100% {background-image: url("https://unsplash.it/1000?image=1080"); }
}
.letterAnimation {
-webkit-animation: changeBckg 16s ease infinite;
animation: changeBckg 16s ease infinite;
}
<body class="letterAnimation">
</body>
A simple CSS only solution, it works using CSS animations #keyframes; You can apply the same code to the body of your html page.
#keyframes cf4FadeInOut {
0% {
opacity: 1;
}
17% {
opacity: 1;
}
25% {
opacity: 0;
}
92% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#cf4a img:nth-of-type(1) {
animation-delay: 6s;
}
#cf4a img:nth-of-type(2) {
animation-delay: 4s;
}
#cf4a img:nth-of-type(3) {
animation-delay: 2s;
}
#cf4a img:nth-of-type(4) {
animation-delay: 0;
}
#cf4a img {
position: absolute;
top: 0;
left: 0;
animation: cf4FadeInOut 5s infinite;
}
<div id="cf4a" class="shadow cf4FadeInOut">
<img src="https://placeimg.com/150/150/01">
<img src="https://placeimg.com/150/150/02">
<img src="https://placeimg.com/150/150/03">
<img src="https://placeimg.com/150/150/04">
</div>
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>
This question already has answers here:
How do I re-trigger a WebKit CSS animation via JavaScript?
(9 answers)
Closed 7 years ago.
I know that we can use the below css to blink a div for the number of times specified:
html:
<div class="blink">blinking text</div>
css:
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.blink {
-webkit-animation: blinker 1s 5;
-moz-animation: blinker 1s 5;
animation: blinker 1s 5;
}
By using the css way, the div will blink after the page loaded without us calling any js function.
But then what if i want to re-blink the div after the user press a button? There's no function to call on "onclick".
<button onclick="">BLINK AGAIN!</button>
Any idea how to do it?
JSFIDDLE
You need to remove the class 'blink' then add it back again, in order to restart the CSS animation
You'll need to use a setTimeout so that it doesn't have the class added to it before it has has the class taken away from it
$("#blinkagain").click(function() {
var $el = $(".blink");
$el.removeClass("blink");
setTimeout(function() {$el.addClass("blink");}, 500);
});
#-webkit-keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
#-moz-keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
.blink {
-webkit-animation: blinker 1s 5;
-moz-animation: blinker 1s 5;
animation: blinker 1s 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blink">blinking text</div>
<button id="blinkagain">BLINK AGAIN!</button>