Starting a CSS animation on pageload

HTML & CSS
1

On the following page, a CSS animation of the right image takes place on page load: http://ionicframework.com/

I thought these animations (and transitions and transforms) took place only when they are clicked on or hovered over. Was I wrong, or is more coding being used to make this work on this page?

2

You were wrong.

Start the code (“Submit”) and see that it automaticlaly starts that specific transition. Most people use :hover’s as the animation / transition because of the functionality but it’s not specific to any pseudo class.

3

In that code, it reverts to the earlier stage, but in the ionic page, it stays there. What’s the difference?

4

Because the default is red in that above link. If you set the div{} background to color to yellow and ran it, it would stay yellow. The transition goes from red to yellow. It stays yellow NOW because the default is yellow and the transition is over

5

Thank you! That is helpful. Now I know how to keep the animation at its end point.

6

You’re welcome! Play around with them. They are fairly new so best to dive into it and master it.

7

Do you know how to move a position from left of center to text-align:center? That’s what throws me. I can’t use pixels because it’s a responsive site.

This does not work:

<!DOCTYPE html>
<html>
<head>
<style> 
body { background-color: #333; }

/* fade on while shifting right: */
.word {
    text-align: center;
    color: #0387c2;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {color: #333; text-align: left;}
    100%  {color: #0387c2; text-align: center;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {color: #333; text-align: left;}
    100%  {color: #0387c2; text-align: center;}
}

</style>
</head>
<body>

<p class="word">This example does not work in Internet Explorer 9 and earlier versions.</p>


</body>
</html>
8

Text-align is not something you can animate: http://www.w3.org/TR/css3-transitions/#animatable-properties

The below example could be modified (e.g. 10%, 20%, etc etc) …althoug honestly I would just do this in Javascript and those who have it enabled would reap the benefit.

<!DOCTYPE html>
<html>
<head>
<style> 
/* fade on while shifting right: */
.word {
    text-align:center;
	display:inline-block;
    color: #0387c2;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {color: #333;width:auto;}
    100%  {color: #0387c2;width:100%;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {color: #333; text-align: left;}
    100%  {color: #0387c2; text-align: center;}
}

</style>
</head>
<body>

<p class="word">This example does not work in Internet Explorer 9 and earlier versions.</p>


</body>
</html>
9

This is slightly better but I would not recommend doing this…support isn’t even good enough IMO. I wouldn’t use animations on my site yet.

<!DOCTYPE html>
<html>
<head>
<style> 
/* fade on while shifting right: */
.word {
    text-align:center;
	display:inline-block;
    color: #0387c2;
	width:100%;
	white-space:nowrap;
    -webkit-animation: myfirst 1s; /* Chrome, Safari, Opera */
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {color: #333;width:auto;}
	10%{color: #333;width:10%;}
	20%{color: #333;width:20%;}
	30%{color: #333;width:30%;}
	40%{color: #333;width:40%;}
	50%{color: #333;width:50%;}
	60%{color: #333;width:60%;}
	70%{color: #333;width:70%;}
	80%{color: #333;width:80%;}
	90%{color: #333;width:90%;}
    100%  {color: #0387c2;width:100%;}
}


</style>
</head>
<body>

<p class="word">This example does not work in Internet Explorer 9 and earlier versions.</p>


</body>
</html>
10

If you don’t want it automatic and you are up for using transitions (e.g. hover) then you can do this

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;text-align:center;
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
}

div:hover {
    width: 300px;
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div>asdf</div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>
</html>
11

I am going to go with a simple fade-on (color change). Thank you for your help!

Now working at http://www.reedyrace.com/2015/offroad/classes.html with page headings (just above the top image banner).