Change div width on load instead of on hover - javascript

How can I replace "hover" with something like a timer or something. I want to make changes that should happen like on load or like 2 sec after load.
Code:
body {
background: white;
}
div.container {
width: 60%;
height: 1em;
overflow: hidden;
position: absolute;
border-style: none;
border-width: none;
border-color: none;
}
div.content {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
}
div.content:hover {
-webkit-transition: all 5s linear;
-moz-transition: all 5s linear;
-o-transition: all 5s linear;
transition: all 5s linear;
width: 500px;
right: 0px;
text-overflow: clip;
}
<div class="container">
<div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>


Pure CSS solution. You can achieve this via CSS animations:
div {
width: 100px;
height: 100px;
background: red;
/* apply 2 second animation with name "grow" */
/* with 2 second delay */
/* and prevent resetting using forwards value */
animation: grow 2s 2s forwards;
}
#keyframes grow {
from { width: 100px; }
to { width: 300px; }
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>
<p>Hover over the div element above, to see the transition effect.</p>
Updated for new requirements
For new requirements you just need to duplicate in from and to blocks properties that need to be changed on animation start (text-overflow: clip and right: 0). Demo:
body {
background: white;
}
div.container {
width: 60%;
height: 1em;
overflow: hidden;
position: absolute;
border-style: none;
border-width: none;
border-color: none;
}
div.content {
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
position: absolute;
/* apply 5 second animation with name "move-text" */
/* with linear timing function and 2 second delay */
/* and prevent resetting using forwards value */
animation: move-text 5s linear 2s forwards;
}
#keyframes move-text {
from {
width: 100%;
text-overflow: clip;
right: 0;
}
to {
width: 500px;
text-overflow: clip;
right: 0;
}
}
<div class="container">
<div class="content">Text text text text text text text text text nb textdfrsdfsdfs dsdfsdfsdfsdfsdf .</div>


setTimeout(() => document.querySelector(".box").classList.add("grow"), 2000)
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
/* For Safari 3.1 to 6.0 */
transition: width 2s;
}
.grow {
width: 300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="box"></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>


u can do sth like this
setTimeout(function(){}, 2000)
the function passed to setTimeout will execute after 2 seconds


See comments inline:
// When the document is ready...
window.addEventListener("DOMContentLoaded", function(){
// Wait 2000 milliseconds and run the supplied function
setTimeout(function(){
document.querySelector(".special").classList.add("delay");
}, 2000);
});
.special {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
.delay {
width: 300px;
}
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class="special"></div>


You can do like this:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
my-div:hover {
width: 300px;
}
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function(){
setTimeout(function(){$("div").addClass("my-div")},2000);
});
</script>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div class=""></div>
<p>Hover over the div element above, to see the transition effect.</p>
</body>
</html>


You can use onmouseover Event on element. for example:
function hoverFunc(element) {
setTimeout(function() {
element.textContent = "You have unboxed me ";
}, 2000);
}
<div onmouseover="hoverFunc(this)"> hover and unbox me </div>


You could use JavaScript.
HTML:
<!DOCTYPE html>
<html lang="en-US en">
<head>
<meta charset="UTF-8" />
<title>Your Title</title>
</head>
<body>
<div></div>
</body>
</html>
CSS:
div{
width: 100px;
height: 100px;
background: red;
}
JavaScript:
window.addEventListener('load', function(){
setTimeout(function(){
let i = 100;
setInterval(function(){
if(i < 300)
i++;
document.getElementsByTagName('div')[0].style.width = `${i}px`;
}, 5);
}, 2000);
});

Related

Toggle animation on click of button using js

I'm trying to get a square to 'fold out' on click of a button -- kind of like a drop-down.
Right now I have this, but it doesn't seem to do anything...
function toggle() {
let classList = document.getElementById('box').classList;
if (classList.contains('expand')) {
classList.remove('expand');
classList.add('retract');
} else if (classList.contains('retract')) {
classList.remove('retract');
classList.add('expand');
}
}
#keyframes anim {
0%: {
visibility: hidden;
}
1%: {
visibility: visible;
max-height: 0px;
}
100%: {
visibility: visible;
max-height: 100px; /* or something bigger than we'll 'ever need' */
}
}
.expand .retract {
animation-name: anim;
animation-duration: 500ms;
animation-iteration-count: 1;
}
.expand {
animation-fill-mode: forwards;
}
.retract {
animation-direction: reverse;
animation-fill-mode: backwards;
}
#box {
background-color: red;
height: 0px;
visibility: hidden;
width: 50px;
}
<button onclick="toggle()">toggle</button>
<div id="box"></div>
Note, that I need to have visibility: hidden here!
How can I achieve this?

OK, your problem is solved. This tryit from W3Schools helped me a lot. I didn't need two class names. Also, as #tao said, there is no point in animating visibility (look at the comments below). Here is the CodePen pen with this code. I guess this is what you want, am I right?
const toggle = () => box?.classList.toggle('expand')
#box.expand {
height: 100px;
}
#box {
width: 50px;
height: 0;
overflow: hidden;
background: red;
transition: height 1s;
}
<button onclick="toggle()">toggle</button>
<div id="box"></div>

Move square to right on every click

As I wrote in the title, when user clicks on the square it should move 100px to the right and after next click it should move 100px again to the right but square is going back to left. How can I fix this?
Also in JSFiddle code is working but when I open this on Chrome it's giving me error:
Cannot read properties of null (reading 'addEventListener')
<html>
<head>
<title>JavaScript animation</title>
<style>
#square {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 0px;
top: 100px;
transition-duration: 3s;
transition: left 1.5s ease-in-out;
}
#square.active {
left: calc(100px);
transition: left 1.5s ease-in-out;
}
</style>
<script>
const square = document.querySelector('#square');
square.addEventListener('click', toggleActive);
function toggleActive() {
square.classList.toggle('active');
}
</script>
</head>
<body>
<div id="square"></div>
</body>
</html>
JS Fiddle link

Right now you're simply toggling the class, so it moves right and back to its original position.
You need to add a value to the already existing value, in this case 100 pixels.
Also not getting an error from your original fiddle.
const square = document.querySelector('#square');
square.addEventListener('click', moveRight);
function moveRight() {
square.style.left = square.offsetLeft + 100+'px';
}
#square {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 0px;
top: 100px;
transition-duration: 3s;
transition: left 1.5s ease-in-out;
}
<div id="square"></div>

Background transition does not work properly

I'm going to change back ground an element in a setInterval function. the background is getting changed imediately, but I would like to make it transited in couple of seconds.
var act = true;
setInterval(function(){
if (act) {
$("div").addClass("back2")
$("div").removeClass("back")
act = false
} else {
$("div").addClass("back")
$("div").removeClass("back2")
act = true
}
}, 10000)
.back{
width:100px;
height:100px;
background-image:url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
display:block;
transition: .5s ;
}
.back2{
width:100px;
height:100px;
background-image:url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
display:block;
transition: .5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="c">tz</div>

background-image is not an animatable property. As you can see in this list on the mozilla dev page, this is not possible: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
What you can do is have two divs with one background image each overlapping each other and then make one of them transparent to create a blending effect.
I made a fiddle to illustrate the idea:
https://jsfiddle.net/Lpduw3mq/
// find elements
var firstDiv = $("#first")
var secondDiv = $("#second")
// Swap backgrounds
var act = true;
setInterval(function(){
if (act) {
firstDiv.addClass("transparent")
secondDiv.removeClass("transparent")
act = false
} else {
firstDiv.removeClass("transparent")
secondDiv.addClass("transparent")
act = true
}
}, 5000)
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.base {
position: absolute;
top: 0;
left: 0;
}
.back {
width: 100px;
height: 100px;
background-image: url("https://www.skoobe.de/static/v/7b2334ac8a86ab5d764bc6e94df87df4aa5b4e2adc78c783e73ae2cbaf613745.jpg");
display: block;
opacity: 1;
transition: opacity 0.5s;
}
.back2 {
width: 100px;
height: 100px;
background-image: url("https://www.skoobe.de/static/v/a5c0d3825217f88c4c893e7b630c4f1c5eb4c9bec834e1112383614270b5d583.jpg");
display: block;
opacity: 1;
transition: opacity 0.5s;
}
.transparent {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="first" class="base back"></div>
<div id="second" class="base back2 transparent"></div>

You can use an unordered list of two items absolutely styled with the image backgrounds and use keyframe animation to change between these two items while smoothly changing a background opacity. Check this out http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

how to change image when ball put into box?

I am trying to do some animation using css or jquery .my ball is put into box when I run my project .I want to change the image if ball is successfully insterted in box.
here is my code
https://jsbin.com/coyarezeto/1/edit?html,css,output
.container {
margin: 10px;
}
.circle0 {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
background: PaleTurquoise;
position :relative;
-webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
animation: mymove 5s;
animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage{
display:none;
position :absolute;
top:250px
}
#-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px; opacity: 0}
}
/* Standard syntax */
#keyframes mymove {
/* from {top: 0px;}
to {top: 250px;opacity: 0.2} */
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 250px;
opacity: .3;
display:none
}
}
.img{
position :absolute;
top:250px
}
I want to change image when ball inserted into box after 5sec
<img class="newImage" width="100" src="https://previews.123rf.com/images/boygointer/boygointer1511/boygointer151100234/49187556-open-gift-box-over-white-background-3d-illustration.jpg"

I don't think this is something CSS can do, but it is something jquery can do witht he following code :
function imgChange(){
setTimeout(function(){ $('.img').attr({'src' : 'insertnewimg'}); }, 5000);
}
function ballTouch(){
//yadda yadda code that makes the ball move and detects when its ina box
if(ballIsInTheBox == true)
imgChange();
}
ballTouch();
setTimeout makes the program wait x, in this case 5000, miliseconds (1000 miliseconds = 1 second) before executing the code inside of it, which changes the image src in jQuery. Good luck, let me know if I screwed anything up. Note : Keep in mind setTimeout doesnt stop the whole program, just delays the function inside of it.

You can use setTimeout and display image after 5 secs. i.e :
//display image after 5 seconds
setTimeout(function() {
document.getElementById('myimage').style.display = 'block';
}, 5000);
.container {
margin: 10px;
}
.circle0 {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
background: PaleTurquoise;
position: relative;
-webkit-animation: mymove 5s;
/* Safari 4.0 - 8.0 */
animation: mymove 5s;
animation-timing-function: ease-in-out;
/* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage {
display: none;
position: absolute;
top: 250px
}
#-webkit-keyframes mymove {
from {
top: 0px;
}
to {
top: 200px;
opacity: 0
}
}
/* Standard syntax */
#keyframes mymove {
/* from {top: 0px;}
to {top: 250px;opacity: 0.2} */
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 250px;
opacity: .3;
display: none
}
}
.img {
position: absolute;
top: 250px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<!-- <div class="container">
-->
<div class="circle0"></div>
<!-- </div>
-->
<img class="img" width="100" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxATDxUSEBAWFhUVFhcVFRIXEBcQEhcVFhEXFxUSFxUYHyggGBolGxMVITEhJSktLi4uFx8zODMtNygtLisBCgoKDg0OGhAQGy4mHR0tLi0tKy0tLystLS0tKy4rLTAtLTAtLS8rLS0tKy0tLS0tLy0tLS0tLS0rLS0rLS0rLf/AABEIAOMA3gMBEQACEQEDEQH/xAAcAAEAAgMBAQEAAAAAAAAAAAAABgcDBAUCAQj/xABIEAABAwECCgYGBwYFBQEAAAABAAIDEQQFBhIhMUFRYXGRsQcTMoGhwSIjQnKy0RQkM1Jic5IlgqKjwvBDRGOz4TRTg4TxCP/EABoBAQACAwEAAAAAAAAAAAAAAAABBAIDBQb/xAA2EQEAAgECAwUGBAYCAwAAAAAAAQIDBBEFEjEhMkFRcRMiYYGRsSPB0fAUMzRCoeEk8VKSsv/aAAwDAQACEQMRAD8AvFAQEBAQEBAQEBB8qgqPpffNNao4mEhkLcbIaVe/Oe5obxKpanebbeT03BopjxTeetp/xH+0GY+3s7Fomb7sz28itHvx4uttp7dax9IbLMJb2Zmtc368bmp9pkjxYTpNJbrSPozsw/vhv+ad3xRO5sKn22SPFhPDNHb+yPrP6tyDpVvRvadE73oQPhIUxqbw1W4LpbdImPn+u6zujXCmS8LG6aVrQ9srmENBDaAAtNCTocruO02r29XmNZhriyzFO74bpYtiqICAgICAgICAgICAgICAgICAgIPMjwASTQAEk7BnKJiN52h+YL3vN89qktLiQ6R5dnoQPZbUamgDuXMtPNO72+LFGLHGOOkMQt81a9dJX8xx803llyV8oZW3vaB/jO76O5hN5Y+yp5Pbb7tGlzXb4meQCc0nsqvpvt1KujjP7rh5pvuiaRWN95dmGxRzXc61tbSjJC5ta4r2AgivAjeFtnHHVSjWW7s9Ux//AD+fqVoGqcHjE35KxhnscfiVdrx6LTW5zRAQEBAQEBAQEBAQEBAQEBBXmF/SjBZn9VZWieQGj3YxETdmMO2d2Qa1XvniOyO12dJwi+WObJ7seHn/AKRmPpktVfSssRGoOcDxWv8AibeS7PA8fhaXeunphsrzS0wPi/E09czvyAjgVnXUx4wq5uB5K9uO0T/hLLRftltFhmks87ZG9W6uKfSFRT0mnK3PpC2zeLVmYlzq6fJizVreu3aqo3DCcxCrckO7/EXhifgsw5qKPZpjVy15METoBUezZxrGrLgs8a1Hs2yNXDj37dL4oS45qhubWflVIrtKMmeLUmI8WG7L2cywT2euR7mkd7m43gwKZtt2MceGLe95NSw2mSOvVyOZ7ryzkVqmZXaY6zHbDuYGYX20XnZh9KldGZWMLHSue1zXnFNQ4/iVrFvHVwddyZN+SIiI6bRHb8X6XBrmVpw31AQEBAQEBAQEBAQEBBp3tekFmhdNaJAxjc7jr0ADOTsCi1oiN5bMWK2W0VpHbKksNukee2Y0VmrFZ8xp9pIPxEdkfhHfVU8mW1uyOj02h4fhw7WvMTf17I9EDWh2REPiD3ZZnMeC0kHNkNMh0KWq8RPZLqMveUaVPNLTOGstmPCCUf8A1TzywnTVbUWFDxrU+0a50kNuPC46SVPtGudHDl4W3719nDB99pPc13zU8+7CdPyTEotDmPd5rXZdwdJj0fLTJRtBnPLSlI3ndjqcnLTljrLr9Hdkx71sraZpMfujaXn4FYpO9ocjU15cNpfoyGZzcx7tCsuG6EFvByOyHwUobL5WgVc4AayaDxRMRM9HmK0sd2XtducDyUbwmaWjrDKpYiAgICAg1W3hEQCHVBygjKg8OvFugHkgxuvE6G+KgYnW9+sDuRKi+lK9ZbXeLonOJis/q2N0YxAMj95dk3NCr3t72zsaTBEYot4yjc8ojZitzqOZs9ju+3FfxgDmTWeO0QuNTE/0XA0pjRyt9KM7sibxPWDkyVnfHaYn9+HRlve23e4Y1ljtETtMT8SaMZuzIHB2vO0rC2Ov9q7p9dlrO2aImPOOv0aDXgioK07THV1a5K3jes7vNcqljZtVWKH1AQEGG1j0dxHy81NWvLG9WtEpsxw9WB2U1WcdkK1vftumfR1eViskrrTaJHGQNLI4mRF9A6mM8vNGg0qAK6StmO1a9sqerw5c8ezxV3jxlKry6VG0pZrMSfvSuAA/cZWv6lNtR5Qxw8Dt1y2+UfrP6IleOG94zVraXMB9mMCEDZVuXiVpnLefF1MXDNNj/t39e1wJZXOOM5xcTpJLjxK19V6tYrG0dj415BqCQRmINCmyZ+Kx+jbpCnZaGWW1yGSKQhjHuNXxuPZ9LO5pNBlzV42cWWYnaXC4lw/Hak5McbTHl4rtVt5oQEBAQVvDeD4Jntzsx3As/eOUajzUJSSzzte0OYag/wB0I0FBlQEFOdIdxywWuWcMJimdjiQCrWucBjMd9041aVzgjaqmWJrbfwej4flx5cUU396vghT2VOeq1czoTheDCp5mucTGYVlzNU4iOA1yZNqi14iO1nh0+Sbb07Pj++rY6vWfJaOd1Yw9nbL6G7VPP8GE6byl9y61PPDCdPfwkq7+ynNVhOLLBjnUp92WMxkr1h4dLUU1rLlapy79jXbpUSmk9WSKLWomW/FiiO2WZQ3vrGE5gTuFUJmI6swsUv8A2n/od8lOzD2lPOPqxTQvb2mOG9pHNNj2lZ6SwOcpiGFrPHWEZQaEZQcxBGlZbNF7dj9T3NM5kTWTzOkeM8jmNYTsIZkV6vZHa8dltW1pmtdo8v8At1QVk1vqAgIKxv1tLVKPxnmoSw2C2vidjNzHtNOYj+9KCXWC1NlbjMy62+0DqKD5ardDEKyyxspnx5Gs+IpumKzPSHEtuHd1x5HWxjtjGvmrsqxpHisZvVurpstulUavLD66HZBYnTf+tGwcXZfBa7XxruLR6z+2Zj5yit44S2OTsXLEzUTaZGnhFirTN8fk6WLSa2OuSfntP33R52NJJRjGMxiAGNx3DLtc4nxWuZjwhfrhyRX37R9P+nQNyzj2Fqmsrdc2OI2hjddUw9gqOWWXt6ebGbBKPYKjlll7Wnm8GzPHsHgm0suevmxmMjODwTZPNDnSSFx2aArFY5YcbNknNbfw8IfWtTmRGCJbEMOlYzbdbw4op1lsxtb7VT4LFtm0+DdhtMbczBwqeJU7tVq2nrLdZfFNPkp5mqcLMy+NqnmYzgZ2XztU8zCcDSt0UEwytDXaHtFD3gZCm8JitoeMB8EX220kPqIIneteNJ0RNOkmncMuqu3HTmUtZq/ZV2jvSvtxqa61aede4Z3NzHu0IN+C3tOR2Q+ClDbBQfUEK6Qoi10UrRWuM14plNMXFIOsZd6JhFmPBFQag6VCUdw8e8WQFjnN9Y0Gji2oLXZDTOK0WGTouaHacu0+SvrOW5iBXXrVS8T4PSaecXdtEb+bbAAzBat3QisR0h9RIgzWOYska5ucHINqjdFqxaNpd9mEE4zxngp55aJ0uOfFmZhS8Z4/BT7RhOir4Sztwsb7UQ/Sp9qw/gZ8JZBhRZzniHAhPaQx/gskdJad9X1ZnWeQRxgPLcVuypAJ4EqYvWUW0+WsbzPYhbWKJlnXGzxRrCZW8WLftnozqG+aVnwE3Yziq9MAqKmg0mmNQa6ZKpuxti7OxKLJgPNPH1lktEEzdNHujcD91zXj0TvW+MM2jes7uRk4jXDbkzVtWfr9mnacDLyZ2rI87WlsvwErGcV48GyvEdNbpePnvH3ce1WSWM0ljez32OZzCwmJjqtUyUv3ZifSd27g7c81rnEMW9787WM0vPkNJyLKlJvO0NWp1FNPTnt8o816XVdsVnhbDC2jG95JJq57jpcTlXQiIiNoeOyZLZLTe3WW2pYCAg2IXSNygGm3IPFBtx3gzMXCuoODuSlDh4fMrAw6n82lEwgJBacZuntN17Rqdz5QlyMNCHWB7hmDmH+MNIOo5Vhk7q1o5/GhWi0O2tK78BrNaYoupndE/EBeHt64Pq0HGZlbSmWoWU4InthUxcZyYt63jm8vD9XdsnRfY2/aSyv3FsY4AE+KmNPXxY343nnuxEf5dmyYE3bHmsrXHW9z5fBxp4LOMNI8FS/EtVfrf6bQ68d2wNYWMhY0EFpxY2tyEUOYbVnyxtsqzmyTaLTaZmPOUVdgnOM3Uu73M/pKr+xl2I4nin/yj6T+bBJg3OP8q13uys/qIUTit5NleIYp/vmPWJ/LdrSXER27DKNwD/hqsfZz5Nsays9Mkfb7tOa67MO3BK33oXAcSFjNI8m6uovPS0T84cO/LFY+ok6p46wAENyA5HAkcKrCYr4LNbZ570djN0fYFm1OE9oaRZ2nIMxmcCQWg6GgjKe4aabcWLm7Z6KHENfGGPZ0732djCro6c2sth9Jumzk1cPcce0Nhy70yafxr9E6HjcTtTUf+3h848Pt6K8e0gkEEEGhBFCCM4IVZ6KJiY3h8RIg27tvKazyCSCQscNI0jUQcjhsKmtprO8NObBjzV5ckbwtDBjpChmpHaqQyZg//Bcd57B35NquY9RE9lux5fW8GyYvexe9Xy8Y/VOBU5M+zOOCsOIxxWFkeMWxsjxqYxDWxY1K0rmrnPFNtkza1us77PrpoxnkH7oL+Qp4ohidboxma53Bg80GJ15H2Y2jfV/M08EGJ1vlPtkbGgM5INd7iTUkk6yanxRLo3FFjPdsbzI+SIlnw4ZWyV1PaeY81JCvVCXHwqgrY5sU09EFw0HFe08cmdY37st+lnbNX9+CsVXd5buD8h+iwOBy9WzLWhqGgV8FZr0h57PG2S3rKaXRfAfRkho/Q7MHfI81LU7CAgICAgAoPMsbXCj2hw1OaHDxTZMTNek7EcbWtDWgAAABoFAAMwAGYIiZmZ3l6QcDCXA6C2guxSybRM1tSdjx7YybxrWrJhrf1dDRcSy6Wdo7a+X6eSrrdgVb45TGYa09sPaGEHMQSRwzqnOG8Tts9Rj4ppr0i2/y27WxZ8Bpz9pLGzdV58BTxUxhnxa78Vxx3azP+HTs2BNmb9pM9/ugRj+orOMMeMq9+KZZ7tYj/P6OlZ7hsEeaAOOt7nSeBNPBZRjpHgrW1eov1t9OxJ7DORC1rCWsAOKxpxWgYxyABWad1w9TMzlnfr/p6WTSICAgICDtYNN9J52AcT/wiJZsL2VsUmzFP8xtfCqlEK2UMmnfDMazTDXG/wCAqLdGzFO2Ss/GFSqs9CtPA+XGsMOXKA5p2UkdTworFO7DhauNs1v34Owsld37ovrMyY7BIeTvnxRDvoCAg9iJ33Tvpk4oPDnNHae0bMbGPBtUGJ1riHtOdubTxcfJBideLdEf6nk+AogxOvGTRit3MHM1KDBLaHu7T3He404IOBfNrxJAPwg+JWnJPa6uipvj3+P6OW+8dq1cy7GNhfeO1N2UY2F947VG7KMaX3O6tnjOtteJJ81ap3YcHVfzrercWTQAIMMtrjbkdI0HVjCvDOgx/Tgewx7tzMUcX0QfOtmOaNrdrnlx4NA5oHUyntTU2MYG+JqfFBOrtgayJoaPZFTpOTSdKliwYQsrZJR+Anhl8kFXKGTxOyrHDW1w4tIRMTtMKcVV6RY2BlfoTC3I4OeNhGOTQ8e5b8fdcTWx+NKRRShw1EZwc4KzVXtB27ivQg9W8FzaHFy0IpoqdCIdh15fdjb3ku+QQYnXhLodT3WhvIVQa73l3aJO8k80S8oCAgICCCYa2zFtWLX/AA2eJcquafed/hlN8G/xn8kcfeO1ad3SjGwvvHao3ZRiYH3jtTdlGJadySTfRYQI2j1TPSc/P6Ay4oHmr9O7DyOqnfNf1n7t3qpj2pQNjGAeLqlZNAbAw9suf7zy4cMyDNFAxvZaBuACDIgIAQTlgoANQUsWveTawSDWx3wlBUyhk+szjeiJU3LHiuLToJHA0VV6Ws7xun+AL62QjVI4cWtPmt2Po5GvjbL8khezLVpo4adB2HWFsUmWKXG0UIzt0j5jag3rs+1G4/CUHZQEBAQEGOWdje05o3uA5oMX05nshzvdYacTQeKD518p7MVNr3geDQeaCsOkGR/09wcRUMjHoggdiozk61Sz996nhEf8aPWfujJcda0Ons+ICC97ubSCMao2D+ALp16Q8Nlne9vWfu2FLAQEBAQZLMKvaNbhzQTZSxeXtqCNYogp9QyEFTX2zFtUw/1H/GSq1usvQYJ3x19Et6O5PUyt1Paf1NI/oW3F0lz+IR79Z+CWLY57w9lcoNCMx8iNI2IN655aygEUcAaj905RrCDtyStb2nAbyBzQYfprPZq73WEjjm8UDr5D2YqbXvDfBtUDEmOd7W+6yp4uJ5IPhsYPae9295A4CgQZIrLG3ssA3AIMqAgqLpBP7Sl2CL/YYqOfvy9Zwr+lr8//AKlHVpdAQEF+xNo1o1ADgAF1IeEtO8zL0iBAQEBBtXYKzM94IhMFKBBUdtbSV41PcODioZMKCr8K2Uts3vV4tB81Xv3pd3STvhq7nRy7LONkZ4F481ni8VTiP9vzTRbXNEHuzsBkZXWBUEg0JoRUIO/FZY29lgG2mXigzICAgICAgIKgw+P7Sm/8f+wxUM3fl63hf9LX5/eUfWpfEH1ramg05EJnaH6Akzneea6jwUdHlEiAgICDfuQevb3/AAlEJWpQIKrv1tLVKPxu5qEtFEq2w2ZS3PP3hGf5TRzBVe/edrRTvhj5/dv9Hj/XSjWwHg8fNZYurVxCPdrKdLc5QgyWc+m33hzCCSICAgICAgICCncOT+0Z/eaOEbQqGbvy9dw3+lp+/FwlqXhBtXUzGtETdcjBxeAsq96GrPO2K0/CfsvZxyneuk8PD4iRAQEBB1MHW+urqaURKTKUCCs8Km0tso2g8WNPmoS5KJV/h+z60064x4OcPktGTq6/D5/DmPi84Au+tka43eBafJMfVOv/AJUeqwlvccQeoz6Q3jmgk5QfEBAQEBAQEFNYaH9oT+//AEhc/L35ev4d/TU9HFWtdEHRwbZW22cf60fg8HyWePvQr6ydsF5+E/Zdy6LxYgICAgIOzg0303nYOaIlIVKBBXeGraWx21rT4U8lCYcFEoR0iM9ZCdbXDg4fNacvWHU4dPZZzMC30t0e0SD+U7zAWNO8362PwZ+X3WUrDiCBVBKTnQfEBAQEBAQEFL4XmtvtH5hXPy9+XsdB/TU9HIWtbEHZwObW8LP+YDwBPktmLvwp8QnbTX9FzLoPHiAgICAg72DDcjz7o518lKJdxECCB4et+sMOtnJxUJhGUSh/SKz0YHajIOIYRyK1ZfB0eHT22j0/NHsFXUtsPvU4tI81hTvQuauPwbLRVhwhB8dmQSlAQEBAQEBAKCk8J3Vt1o/Nf4OIXOyd+Xs9FG2np6Q5iwWRB3sBG1vGDe88InnyW3D34UOJztpb/L7wuFX3khAQEBAQSPBtvq3HW7kFKJddECDgYW3MZ48dg9YwZB95ulu/UiYV4oSjHSAytmYdUg8WO+QWvJ0XtBP4k+iHXG/FtUJ/1GeLgPNaq9YdLPG+K3othWXnxAKCTsOQbhyQfUBAQEBAQEFHX8frc/50n+45c6/el7XS/wAinpH2aKwbxBJOjxlbyjOpsp/kvHmt2Dvw53FZ20tvjt94W2rzyggICAgIJRcDaQDaSVKJdJECAgg+GVyYhM8Y9E9sDQT7W481CYVvhuyticdT2Hxp5rDJ3VvRT+NCu7NJiva77rgeBqtDs3jmrMea435zvPNWnm4fESIJLAfQb7o5IPaAgICAgIPrc6IUVe7q2mY65ZD/ABlc2/el7fTxtip6R9mosW4QSzozb9eJ1RPPEtHmt+n77lcYn/jx6x+a01deYEBAQEBBLbnbSBm4ni4lSxluoCAg8yxhzS1wqCKEHMQgp3pPuV0FmmAysIa5jtglZUHaFhk7srWkn8av78FNqu7q5WOqAdYB4iqtPNTG07PqAgkdlPq2+6OQQZUBAQEBAQeo+0N45oieihLY6srzrc48XFcyer3WONqRHwYVDMQTPouZ9akdqipxkZ8lY0/elx+NT+FWPj+UrMVx5sQEBAQEEzsDKRMH4RyUsWdAQEBBysJ7lZbLJLZ3mmO0hr6VLXaHcVExvGzPHfktFvJ+WL5uuazTvs87cWSM0cNGsOB0gggg6iqsxt2PRUvF6xaOkrSu5+NDGdcbD/AFZjo89kja0x8WwpYiCRWL7JnuhBmQEBAQEBB6j7Q3jmiJ6Pz8SuW96ICCddFTfWzn8DRxf/wrOm6y4fG592kfGViq28+ICAgIAQTeJtGgagB4KWL2gICAgIID0r4EC3QdfA36zEPRpkMrM5jOsjKW7ajStd679sLmk1Hs7cs9JQy4DWyQ/ltHe30SPBTXpDVn/mW9W+smoQSC7z6pm7zKDYQEBAQEBB9BQfn9ct7wQEE/6KG/9Sfyhx6z5K1pvFweNz/L+f5LAVpwRAQZYbM93ZYTuGRB0ILikPaIb4lEbujBccQ7VXbzQcApN3URAgICAgICCEYYXCGevhbRpJ6xoFACTXHAGsk12naoTvv1RREiDv3YfUt7/iKDZQEBAQEBB5mNGuOpp5FJTXrCgly3uxAQWN0UxertDtb4x+lsh/qVvTdJee43b36R8J/L9FiwXZM7MwgazkCsuG6MGD/339zfmVJu6EF1wtzMB2n0kRu3ANSD6gICAgICAgICDy9gIIIqDkIOYjUgrbCO5zZ5cn2bsrDzadoUJchEu7dX2Ld7viKDbQEBAQEBBhthpE8/gf8AAVE9GWPvR6x91GWSxyyuxYo3vd91jC88AFzYiZ6PcWvWkb2nZLrp6L7zmoXRthB0yuxTT3WgniFtrgvKhl4rp8fZE7+ibXT0N2ZtDabQ+Q6WsAiZuJNT4hbq6aPGXNy8ayT3KxHr2p5clwWWyMxLNC1gJqc5JNKVLjlK31rFY2hys2fJmtzXneXTWTSICAgICAgICAgICAgINS87AyeIxvzHMdIOghBWFvsb4ZHRvGVvAjQRsUMnUug+qG880G4gICAg2oLvlf2WHecg4lEOhBg+723gbBlUm7oR3NAAQWY1QQcbLUEUI8U2ImYneGxYrDDE3FhiZG0eyxgYOACiIiOjK+S153tMzPxbClgICAgICAgICAgICAgICAgICDiYUXKJ48Zo9Yzs7RpafJBE7oBEZByEOOTuChk3443ONGtJ3CqDfguaZ2cBu8+QRDowXAwdtxOweiFJu6MFjjZ2WAbaVPFEM6AgICAgICAgICAgICAgICAgICAgICAg5bbviM7yWDLRx3kZTTuCDpRxtaKNAG4UQekBAQEBAQEBAQEBAQEBAQEBAQf/2Q=="
alt="">
<img class="newImage" id="myimage" width="100" src="https://cdn3.vectorstock.com/i/1000x1000/28/52/surprise-open-gift-box-vector-20692852.jpg" </body>

This is What I reached so far .. With help from Detect the End of CSS Animations and Transitions with JavaScript
You need to create animate class holds the animation
Add this class using javascript
Use a function to detect the end of css animation
Finally you can use .toggle() to toggle between images
$(document).ready(function(){
var animationEvent = whichAnimationEvent();
$(".circle0").addClass("animate");
$(".circle0").one(animationEvent,
function(event) {
$(".img , .newImage").toggle();
// Do something when the transition ends
});
});
function whichAnimationEvent(){
var t,
el = document.createElement("fakeelement");
var animations = {
"animation" : "animationend",
"OAnimation" : "oAnimationEnd",
"MozAnimation" : "animationend",
"WebkitAnimation": "webkitAnimationEnd"
}
for (t in animations){
if (el.style[t] !== undefined){
return animations[t];
}
}
}
.container {
margin: 10px;
}
.circle0 {
border-radius: 50%;
height: 30px;
width: 30px;
margin: 10px;
background: PaleTurquoise;
position :relative;
}
.circle0.animate{
-webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
animation: mymove 5s;
animation-timing-function: ease-in-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
}
.newImage{
display:none;
position :absolute;
top:250px
}
#-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px; opacity: 0}
}
/* Standard syntax */
#keyframes mymove {
/* from {top: 0px;}
to {top: 250px;opacity: 0.2} */
0% {
top: 0px;
}
50% {
top: 100px;
}
100% {
top: 250px;
opacity: .3;
display:none
}
}
.img{
position :absolute;
top:250px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- <div class="container">
--> <div class="circle0"></div>
<!-- </div>
-->
<img class="img" width="100" src="data:image/jpeg;base64,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" alt="">
<img class="newImage" width="100" src="https://cdn3.vectorstock.com/i/1000x1000/28/52/surprise-open-gift-box-vector-20692852.jpg"
</body>
</html>
To be honest: simple way is to use setTimeout after 5 seconds .. If its not what you looking for then you can use my answer

Here is actual solution for your question :https://jsfiddle.net/t8re0vnk/1/
You can handle this by binding event to animation circle.
var element = document.getElementById("circle0");
element.addEventListener("animationend", function() {console.log('zxcxzc'); changeImg();}, false);
function changeImg(){
document.getElementById("img").src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqcPW3wEJ3qv3zjTkw5DQaDkgmCiTDclMKMVHp9RZ8VJpZkxal9g';
}
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- <div class="container">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
--> <div id="circle0" class="circle0"></div>
<!-- </div>
-->
<img class="img" width="100" id="img" src="https://mk0westpacklifeyuwd8.kinstacdn.com/wp-content/uploads/99508-gift-box-small-blue-34284-copy-1.jpg" alt="">
</body>
</html>

Hard transition of other properties when display property is involved

I want to fade between two differently sized elements within a container overlaying each other. The first element should be faded out, then the container resized and finally the other element faded in.
Here's the related snippet:
var layer1 = document.getElementById("layer1");
var layer2 = document.getElementById("layer2");
function switchLayers() {
layer1.addEventListener("transitionend", function() {
layer2.classList.add("fadein");
});
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px;
overflow: hidden;
}
.layer {
position: relative;
width: 400px;
}
#layer1 {
height: 100px;
float: left;
background-color: blue;
}
#layer2 {
height: 150px;
background-color: red;
display: none;
opacity: 0;
}
#layer1.fadeout {
opacity: 0;
transition: opacity 1s ease-out;
}
#layer2.fadein {
display: block;
opacity: 1;
transition: opacity 1s ease-out;
}
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>
When the second layer's display property is set to block it works as expected, i.e. the opacity is changed from 0 to 1 within a second. Though if it's set to none, the transition suddenly is discrete.
I've tried to set all within the transition value to transition all properties and also tried to include the display property in the transition like this:
transition: display 0s, opacity 1s ease-out;
Though without success. Note that because the container should resize to the size of the currently displayed layer, the visibility property can't be used (as it hides the element but still lets it occupy the space).
How to made this work?

Try using the visibility property instead of display.
For more information regarding the state changes in visibility and display, refer article.
For transitioning the parent height, you have to manually change the height property of the #container. Using display: block & display: none will never transition the parent.
Refer code:
var layer1 = document.getElementById("layer1");
var layer2 = document.getElementById("layer2");
function switchLayers() {
layer1.addEventListener("transitionend", function() {
layer2.classList.add("fadein");
document.getElementById("container").style.height = "170px";
});
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px;
height: 100px;
overflow: hidden;
transition: all 0.5s;
}
.layer {
position: relative;
width: 400px;
}
#layer1 {
height: 100px;
float: left;
background-color: blue;
}
#layer2 {
height: 150px;
background-color: red;
visibility: none;
opacity: 0;
}
#layer1.fadeout {
visibility: none;
opacity: 0;
transition: all 1s ease-out;
}
#layer2.fadein {
visibility: visible;
opacity: 1;
transition: all 1s ease-out;
}
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>

There is no straightforward way. Transitions do not work on display, nor do they work on auto height. So, visibility is a good bet.
Note that because the container should resize to the size of the
currently displayed layer, the visibility property can't be used (as
it hides the element but still lets it occupy the space).
Then, you will need to hack it out. You can make use of min-height. Give a faux min-height to your container, and then apply the height of your layer2 to it once the transition ends. Also, because display on layer2 will block the transition, you need to separate out the classes for display and opacity and space out their application using a zero timeout in between.
Here is a crude idea:
var layer1 = document.getElementById("layer1"),
layer2 = document.getElementById("layer2"),
container = document.getElementById("container"),
h = window.getComputedStyle(layer2).getPropertyValue("height");
container.addEventListener("transitionend", function(e) {
if (e.target.id === 'layer1') {
// apply layer2 height to container min-height
container.style.minHeight = h;
}
if (e.target.id === 'container') {
// First show the layer2
layer2.classList.add("show");
// Then a dummy pause to fadein
setTimeout(function(){
layer2.classList.add("fadein");
}, 0);
}
}, false);
function switchLayers() {
layer1.classList.add("fadeout");
}
#container {
position: relative;
background-color: yellow;
padding: 10px; overflow: hidden;
min-height: 1px; /* faux min-height */
transition: min-height 1s linear;
}
.layer { position: relative; width: 400px; }
#layer1 {
height: 100px; float: left;
background-color: blue;
transition: all 1s linear;
}
#layer2 {
height: 150px; background-color: red;
display: none; opacity: 0;
transition: opacity 1s linear;
}
#layer1.fadeout { opacity: 0; }
#layer2.show { display: block; } /* Separate out display */
#layer2.fadein { opacity: 1; } /* Separate out opacity */
<button onclick="switchLayers()">Switch layers</button>
<div id="container">
<div id="layer1" class="layer"></div>
<div id="layer2" class="layer"></div>
</div>

Categories