Slow down W3CSS animation ?

[gordonisnz]

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).

 

 

[gordonisnz]

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). 

[dsonesuk]

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>

 

[gordonisnz]

Thanks. Is there any documentation on this ? (it works).   Ive figured out the 1.6s number is speed, higher the number the slower it goes....

EDIT: Found it - https://www.w3schools.com/cssref/css3_pr_animation.asp    

 

Edited October 13, 2018 by gordonisnz

[dsonesuk]

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.