Smooth transition to make element appear

Smooth transition to make element appear - javascript

When I click on the button, I would like the arrow to appear by sliding out smoothly. I'm currently doing this by adding the 'show' class if the arrow should be shown. I've tried display: none; -> display: inline-block I've tried width:0 -> width: 100%.
This code makes the arrow appear/disappear onclick, but without a smooth transition.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
width: 0;
overflow: hidden;
max-width: 0;
display:none;
}
.show {
width: 100%;
display: inline;
}
</style>
<script>
function toggleArrow(elemId) {
let elem = document.getElementById(elemId);
if (elem.classList.contains('show')) {
elem.classList.remove('show');
} else {
elem.classList.add('show');
}
}
</script>
</head>
<body>
<div> Here's the button:
<button onClick="toggleArrow('title-arrow')">my button<span id="title-arrow" > ↑</span></button>
</div>
</body>
</html>

Did it works right?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
button{
position:relative;
padding-right:20px;
overflow: hidden
}
span {
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
overflow: hidden;
top:50px;
position: absolute;
right:5px;
}
.show {
top:0;
}
</style>
<script>
function toggleArrow(elemId) {
let elem = document.getElementById(elemId);
if (elem.classList.contains('show')) {
elem.classList.remove('show');
} else {
elem.classList.add('show');
}
}
</script>
</head>
<body>
<div> Here's the button:
<button onClick="toggleArrow('title-arrow')">my button<span id="title-arrow" > ↑</span></button>
</div>
</body>
</html>

If you want to make it appear, you can use
button.addEventListener("click", function() {
element.style.opacity = 1;
});
#element {
opacity: 0;
transition: 1s;
}
then when you click the button, the arrow element fades in in one second.

Related

Fading in a background image using javascript or css on hover

So far, i've been able to make it such that when the cursor hovers over the div a background image in the body appears. I need to add a fade in animation to this. Ive been looking for solutions here but havent been able to work around it. I don't have any experience in javascript.
enter code here
<script>
changeBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";
console.log("working")
}
ogBgImage = () => {
document.body.style.backgroundImage = "url('../Images/Background/black.jpg')";
console.log("working")
}
</script>
<style>
body {
background-image: url('../Images/Background/black.jpg');
}
</style>
<body>
<div class="gwraith"><a href="../Legends/wraith.html ">
<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">
</a>
</body>

Add a transition rule to the body tag. The same can be done in css, without javascript.
function changeBgImage() {
document.body.style.backgroundImage = "url('https://s1.1zoom.ru/big0/284/Summer_Pond_Fence_Trees_496376.jpg')";
}
function ogBgImage() {
document.body.style.backgroundImage = "url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg')";
}
body {
background-image: url('https://pristor.ru/wp-content/uploads/2017/02/leto12.jpg');
background-repeat: no-repeat;
background-size: cover;
transition: all 0.7s linear;
}
<body>
<div class="gwraith">
<a href="../Legends/wraith.html">
<img src="https://begin-english.ru/img/word/refresh.jpg" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">
</a>
</div>
</body>

I didn't manage to do it with body. But you can stretch the underlying div and change its opacity.
const appDiv = document.getElementById("app");
appDiv.addEventListener("mouseover", showBodyBackground);
appDiv.addEventListener("mouseout", hideBodyBackground);
function showBodyBackground() {
document.getElementById("bg").classList.add("hidden");
}
function hideBodyBackground() {
document.getElementById("bg").classList.remove("hidden");
}
.visible {
background: url('https://www.bouwendnederland.nl/media/6502/rijnhaven-impressie-602-x-402.jpg');
transition: opacity 1.5s linear;
opacity: 1;
}
.hidden {
opacity: 0;
}
.stretched {
position: absolute;
width: 100%;
height: 100%;
}
#app {
width: 100px;
height:50px;
background: lightblue;
text-align: center;
margin: 0 auto;
position: relative;
}
<body>
<div class="stretched visible" id="bg"></div>
<div id="app">Hover me!</div>
</body>
Be aware, that everything will disappear in the element with opacity: 0. It means, your button and other elements you want to keep on the screen shouldn't be children of that div.

We can't just fade body, or indeed any wrapper div which may replace it, as that would fade everything. We also can't directly fade a background image as CSS doesn't have that ability. But we can put the two background images into the two pseudo elements, before and after, of body and these can then be animated to fade in and out. The code wants to fade in one background on mouseover, and fade it out on mouseout.
There are two background images used, one called black. The code here fades that out as the other image fades in, but that can be easily removed if required.
Mouse over the gear image to fade in the second image, and mouseout of the gear to fade it out.
<!DOCTYPE html>
<html>
<head>
<script>
changeBgImage = () => {
<!--document.body.style.backgroundImage = "url('../Images/Background/wraithback.jpg')";-->
document.body.classList.toggle('showbefore');
document.body.classList.toggle('showafter');
console.log("working")
}
ogBgImage = () => {
<!--document.body.style.backgroundImage = "url('christmas card 2020 front.jpg')";-->
document.body.classList.toggle('showbefore');
document.body.classList.toggle('showafter');
console.log("working")
}
</script>
<style>
body {
position: relative;
height: 100vh; /* I added this just to cover the whole window you may not want it */
}
body:before, body:after {
opacity: 0;
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background-size:cover; /* I added this just to get the background over the whole window - you may or may not want it */
background-repeat: no-repeat no-repeat;
background-position: center center;
animation-duration: 2s; /* change to what you want it to be */
animation-fill-mode: forwards;
}
body:before {
background-image: linear-gradient(black, black); /*change this to url('your background image');*/
animation-name: shown;
}
body:after {
background-image: url('https://ahweb.org.uk/christmas card 2020 front.jpg');
animation-name: unshown;
}
body.showbefore:before, body.showafter:after {
animation-name: show;
}
body.showafter:before, body.showbefore:after {
animation-name: unshow;
}
#keyframes unshown {
from {
opacity: 0;
}
to {
opacity: 0;
}
}
#keyframes shown {
from {
opacity: 1;
}
to {
opacity: 1;
}
}
#keyframes unshow {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
#keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body class="showbefore">
<div class="gwraith"><!--<a href="../Legends/wraith.html ">-->
<!--<img src="../Images/Legends_pics/wraithchibi.png" width="130vw" class="wraith"
onmouseover="changeBgImage();" onmouseout="ogBgImage();">-->
<img src="https://ahweb.org.uk/gear.jpg" width="130vw" class="wraith"
onmouseover="event.preventDefault();event.stopPropagation();changeBgImage();" onmouseout="event.preventDefault();event.stopPropagation();ogBgImage();">
<!--</a>-->
</body>
</body>
</html>

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,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"
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>

How to create a zoom effect with function call in jquery

i have code in which when user clicks a link named zoom the an alert with a zoom effect is shown to user..
I want the same to happen when i click a button ...
when i try it to button click its not working.
How to achieve this?How to correct the code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
<style>
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
</head>
<body>
<div class="links">
<div class id="inline-popups">
Zoom
<button onClick="#test-popup" data-effect="mfp-zoom-in">test</button>
</div>
</div>
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfull</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>

Try the below
var theControl = $("#test-popup");
$('#clickMe').magnificPopup({
items: {
src: theControl,
},
type: 'inline',
mainClass: 'mfp-with-zoom', // this class is for CSS animation below
zoom: {
enabled: true, // By default it's false, so don't forget to enable it
duration: 300, // duration of the effect, in milliseconds
easing: 'ease-in-out', // CSS transition easing function
// The "opener" function should return the element from which popup will be zoomed in
// and to which popup will be scaled down
// By defailt it looks for an image tag:
}
});
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
<style>
html,
body {
margin: 0;
padding: 10px;
-webkit-backface-visibility: hidden;
}
/* text-based popup styling */
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width: auto;
max-width: 400px;
margin: 0 auto;
}
/*
====== Zoom effect ======
*/
.mfp-zoom-in {
/* start state */
/* animate in */
/* animate out */
}
.mfp-zoom-in .mfp-with-anim {
opacity: 0;
transition: all 0.2s ease-in-out;
transform: scale(0.8);
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
transition: all 0.3s ease-out;
}
.mfp-zoom-in.mfp-ready .mfp-with-anim {
opacity: 1;
transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
.mfp-zoom-in.mfp-removing .mfp-with-anim {
transform: scale(0.8);
opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
<div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfully</div>

You need to create a function that the onclick attribute will trigger. In that function, you can do the zoom logic that you prefer.
<button onclick="zoomLogic" data-effect="mfp-zoom-in">test</button>
Inside your script tag or in your script:
function zoomLogic() {
//Grab the element you wish the zoom effect to take place and do your logic
}

Change div width on load instead of on hover

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);
});

Triggering CSS animation with JavaScript

I have this html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" />
<link href="animation.css" rel="stylesheet" />
<meta charset="utf-8" />
</head>
<body>
<div class="box box-anim-start box-anim-end"></div>
<script src="jquery-2.1.4.min.js"></script>
<script src="JavaScript.js"></script>
</body>
</html>
As you can see there are two stylesheets linked to this page.
StyleSheet code
.box {
height: 100px;
width: 100px;
background-color: red;
}
animation code
.box-anim-start {
}
.box-anim-end {
transition-property: transform;
transition-duration: 2s;
transition-delay: 5s;
}
And here's the JavaScript code
var box = $(".box").eq(0);
var sheet = document.styleSheets[1];
var rules = sheet.cssRules || sheet.rules;
var rule0 = rules[0];
rule0.style.transform = "translateX(100px)";
var rule1 = rules[1];
rule1.style.transform = "translateX(0px)";
What I wanted was an animation upon opening this page. And, since the delay is mentioned in css, i thought that would work. But it didn't. Could you explain why?

It's makes a lot more sense to define your CSS animation in your CSS using keyframes, you can then call it in by adding a class to your box once the page has loaded.
So initially remove the .box-anim-start class
<div class="box"></div>
Then define the animation using keyframes:
#keyframes slide {
0%{
transform: translate(0, 0)
}
100% {
transform: translate(100px, 0)
}
}
Then call the animation within .box-anim-start
.box-anim-start {
animation: slide ease-in 2s;
animation-delay: 2s;
}
.box{
transition: 2s ease-in;
}
And finally add the class once the page has loaded using jQuery
$(document).ready(function){
$('.box').addClass('.box-anim-start');
});

The best way is to use the stylesheet.
In Chrome, for instance, your line:
var rules = sheet.cssRules || sheet.rules;
is wrong because rules is null. This happens because you need to change the index to
var sheet = document.styleSheets[0]; // instead of 1 in my case
But consider to put a delay between the two transition.
Instead, if you want simply use the js with your styles you can do:
$(function () {
$('div.box').css('transform', 'translateX(100px)').delay(3000).queue(function (next) {
$(this).css('transform', 'translateX(0px)');
next();
});
});
.box {
height: 100px;
width: 100px;
background-color: red;
}
.box-anim-start {
}
.box-anim-end {
transition-property: transform;
transition-duration: 1s;
transition-delay: 2s;
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div class="box box-anim-start box-anim-end"></div>

We Keep Coding

JavaScript is the programming language of the Web.

Smooth transition to make element appear - javascript

If you want to make it appear, you can use button.addEventListener("click", function() { element.style.opacity = 1; }); #element { opacity: 0; transition: 1s; } then when you click the button, the arrow element fades in in one second.

Related

Fading in a background image using javascript or css on hover

how to change image when ball put into box?

How to create a zoom effect with function call in jquery

Change div width on load instead of on hover

Triggering CSS animation with JavaScript

Categories

Resources