Jump to content
gordonisnz

Slow down W3CSS animation ?

Recommended Posts

https://www.w3schools.com/w3css/w3css_animate.asp

Hello.  I am interested in starting a page with animations (left / or right). 

 

Question 1: is there a way to SLOOW it down a bit ?  The examples shown on the above site are very fast, and I would like the items to move at a slower pace, about 1/2 the speed.

 

Question 2: I'm thinking of combining the left or right animation with slideshow,  and with various content - cards, text, etc. I think it is possible to combine the content. But i'm just trying to figure out how to slow it own first.. (otherwise I wont want the animation).

 

 

Share this post


Link to post
Share on other sites

EDIT: How do i NOTIIFY ME OF REPLIES - after i post something ? (i found out now -that i can do this if i reply to my own message).  

but theres no option to do this on an existing post. (I posted the above message without ticking the box). 

Share this post


Link to post
Share on other sites

You'll have to override the current transition speed, it would better to use  a custom class name, and place these in a custom css file, and make sure the link to this file is below the link to w3css file.

original speed 0.4s, new 1.6s

left:

.mycustom_class.w3-animate-left {
    animation: 1.6s ease 0s normal none 1 running animateleft;
}
<div id="Left" class="mycustom_class animTest w3-animate-left" style="display: none;">Animation is Fun!</div>

right:

.mycustom_class.w3-animate-right {
    animation: 1.6s ease 0s normal none 1 running animateright;
    }
<div id="Right" class="mycustom_class animTest w3-animate-right" style="display: block;">Animation is Fun!</div>

 

Share this post


Link to post
Share on other sites

The logic is to look up what causes the movement. using f12 to bring up the web developers tools console, click element inspector, inspect element and look at css applied to that element, then do a search in w3schools.com for information related to the css styling, i.e 'animation', that you are interested in learning more about.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×