Can the CSS3 animations and transitions fire onclick or only on page load?

HTML & CSS
1

When I use the following, an image slides gracefully out from the left, then snaps back to the left when the animation is done. It all happens at page load, automatically:

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
    from {
        left:   -275px;
        width:  572px;
        height: 894px;
    }
    
    to {
        left:   200px;
        width:  572px;
        height: 894px;
    }
}

/* Standard syntax */
@keyframes example {
    from {
        left:   -275px;
        width:  572px;
        height: 894px;
    }
    
    to {
        left:   200px;
        width:  572px;
        height: 894px;
    }
}

Is it possible to initiate the above by clicking on a button? Or do we need to use JavaScript to make an image slide out and remain in place via a button?

2

You just answered yourself :slight_smile:

Though with new stuff like SASS or LESS there may be a way… but I think not. If I’m wrong, someone here will enlighten the two of us, I’m sure :slight_smile:

3

Generally you would use javascript to add a class to the element when a button is clicked and then use that class in the css to trigger the animation.

You can trigger the animation wirthout javascript if you slightly abuse a checkbox like so.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
 from {
 left:   -275px;
}
to {
	left:   200px;
}
}

/* Standard syntax */
@keyframes example {
 from {
 left:   -275px;
}
to {
	left:   200px;
}
}
.test {
	position:absolute;
	left:-572px;
	background:red;
	width:  572px;
	height: 400px;
}
#click:checked + .test {
	-webkit-animation: example 4s forwards;
	animation: example 4s forwards;
}
#click{position:absolute;visibility:hidden}
label{cursor:pointer}
</style>
</head>

<body>
<div>
		<label for="click">Click Me</label>
		<input id="click" name="click" type="checkbox" value="">
		<div class="test">testing</div>
</div>
</body>
</html>

To make the animation stay at its end position then use the forwards keyword and then it won’t snap back.

2 Likes
4

One possible non-js solution, albeit not very semantic is to use hidden checkboxes/radio buttons.

say, something like:

<label for >Am the 'button'</lable> <!-- this can be anywhere in the code technically-->
<input type="checkbox" class="hideOffPage" Id="someName" class="animate">
<div> four stuff  here  </div><!-- this MUST follow directly after the input tag-->

. hideOffPage { position:absolute; left:-99999em;}
.animate:checked + div ( the rest of your selector ){ your styles;}

Of course this may limit legacy IE support ( to IE7/8 , I think) and FF3.5, Safari 3.1, etc…

hope that helps

1 Like
5

This works BEAUTIFULLY! Thanks! Now if I can only get it to slide back as well as forwards (I think my boss will ask this next).

6

If you want it to slide back then just adjust the keyframe so that it moves to the right and then moves back to the left…

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
 0% {
 left:   -275px;
}
50% {
 left:   200px;
}
100% {
 left:-275px;
}
}

/* Standard syntax */
@keyframes example {
 0% {
 left:   -275px;
}
50% {
 left:   200px;
}
100% {
 left:-275px;
}
}
.test {
	position:absolute;
	left:-572px;
	background:red;
	width:  572px;
	height: 400px;
}
#click:checked + .test {
	-webkit-animation: example 4s ;
	animation: example 4s ;
}
#click {
	position:absolute;
	visibility:hidden
}
label {
	cursor:pointer
}
</style>
</head>

<body>
<div>
		<label for="click">Click Me</label>
		<input id="click" name="click" type="checkbox" value="">
		<div class="test">testing</div>
</div>
</body>
</html>
7

Thank you!! I just tested it and found it doesn’t work in iPod touch. Bummer. We’ll see if the boss will let that slide, or do an alternate.

No … it works on a modern iPhone, just not on my obsolete iPod touch. It’s good!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.