Post navigation

Triggering CSS Animations with Sibling Selectors

Combinators describe the relationship between CSS selectors, and they’re commonly used to combine two or more selectors into a more specific selector. Examples of combinators are the greater-than sign (>), plus sign (+), and tilde symbol (~). If you’ve ever worked with descendant selectors, then you’ve already used combinators because the whitespace between the selectors is also considered a combinator.

There are three other types of selectors that use combinators: child selectors, adjacent sibling selectors, and general sibling selectors. When combined with one of the UI element states pseudo-classes, we can trigger events that would otherwise require jQuery, with simple CSS.

In this article, we’ll learn how to trigger CSS animations using the two sibling selectors.

I’ve already defined the keyframe animation sequences and attached them to their respective selectors: .tortoise, .hare, and .road. To view and learn more about the CSS used to create these animations, take a look at the style sheet.

Currently, the animations are immediately triggered by the browser because by default, CSS animations run as soon as the page loads. We want the animations to play only when triggered by a user action––like clicking a button.

Next, we’ll focus on the element states and sibling selectors needed to trigger our animations. But before we begin, let’s quickly go over how sibling selectors work.

Adjacent Sibling Selector

The following will target only those paragraphs immediately following an h2:

h2 + p {
color: red;
font-weight: bold;
}

General Sibling Selector

The general sibling selector uses the tilde symbol (~) as its combinator to target every specified sibling that follows an element. It’s very similar to the adjacent sibling selector. The difference is that the elements can appear anywhere after the first sibling.

For example, this will target every sibling paragraph that follows an h2:

h2 ~ p {
color: red;
font-weight: bold;
}

What will Trigger the Animations?

Since we’re not using any jQuery, we’ll need a state (or event) similar to jQuery’s .click() event to trigger our animations.

For this purpose, the :checked pseudo-class is useful because the :checked state of a checkbox can be altered by user action––it can be toggled on and off, and we’re able to target sibling elements based on whether or not the box is checked. Perfect!

I carefully styled the checkbox element to look and work like a button that toggles its text and background colors when clicked.

The button’s text and background gradients were added and styled as generated content using the :after pseudo-element. Check out how it was done.

Using the Adjacent Sibling Selector

We’ll need each animation to play on the :checked state––or when the button is clicked, so let’s create the selector to make this happen.

The checkbox has the class name “go”, so we’ll need to add the :checked pseudo-class to the .go selector:

Using the General Sibling Selector

This selector binds the go-hare and hare-hop animation sequences to any sibling with the class hare. View it in CodePen.

With the general sibling selector we’re able to trigger animations for any siblings that follow the checkbox, so we’ll create another selector that binds the move-road and rotate-road animations to the .road selector.

This will animate the background image and add a 3D perspective to the page.

Conclusion

Support for sibling selectors looks good, as all majors browsers support them. The general sibling selector is also supported––although buggy––in IE7+ and the adjacent sibling selector works in IE8+. The :checked pseudo-class, however, lacks support in IE8 and below.

7 comments on “Triggering CSS Animations with Sibling Selectors”

It doesn’t work on Firefox because he’s used only -webkit- properties. If those are removed, the animations work in *all* browsers. Choosing -webkit- properties has actively broken the animation in Firefox and IE.

Hello! We're the teachers here at Treehouse. We produce video courses on everything from web design and web development to iOS and business skills. You can browse our full library of content to find the course that's right for you.

In the meantime, explore the free features, tips, tricks and videos here on our blog. Tell us what you think, we'd love to chat: blog@teamtreehouse.com

Stay Updated

Sign up for our newsletter, and we'll send you news and tutorials
on web design, coding, business, and more! You'll also receive these
great gifts:

checkArt and the Web: Line, Shape, and Form - An eBook by Treehouse Teacher Nick Pettit.

checkOn Freelancing - An audiobook about running your own business by Simon Collison.

Treehouse Project

If you’ve never built a website before and you have no coding or design experience, this is the place to start. In this project, we learn how to build a modern portfolio website for desktops, tablets, and mobile devices. We start with basic HTML and CSS syntax. Next, we learn how to build custom web pages with an image gallery and contact page. Finally, we walk through how to share a website live on the web.

Swift is a new programming language created by Apple to program iOS apps. If you are new to programming or to Swift then this course is for you. Learn about programming concepts like: variables, types, collections and control structures.

Ruby is a programming language with a focus on simplicity and productivity, and it's used to create some of the biggest websites in the world. Learn how to work with Ruby and write simple Ruby programs in this introductory course.

Interested in creating Android apps? Learn the Java programming language, a tool for Android development called Android Studio, and some very basic concepts of the Android Software Development Kit, or SDK.

Bring your big idea to life! Learn how to start a company on the right foot with an introduction to basic business concepts, including corporate structure, marketing, finance, and accounting. Then you’re ready for more advanced business strategies.