Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Transitions and Transforms Getting Started with CSS Transitions Transitioning Multiple Properties

Posted by Brendan Dzeguze
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Dzeguze
Front End Web Development Techdegree Graduate 14,567 Points

i need help on this challenge.

I thought i typed the code right, but the site says my answer is incorrect. i don't know any other way to solve this. can anyone tell me what am i doing wrong?

style.css 
/* Complete the challenge by writing CSS below */

.content {
  transition: color;
  transition: background;
}

.invert:checked ~ .content {
    color: #fff;
    background: #373737;
}
index.html 
<!DOCTYPE html>
<html>
<head>
    <title>CSS Transitions</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container clearfix">

        <input type="checkbox" id="invert" class="invert"><label for="invert">Invert Colors</label>

        <div class="content">
            <h2>Bear claw</h2>
            <p>Wafer apple pie sugar plum lollipop jelly-o croissant. Jelly beans bear claw fruitcake sugar plum. Bear claw oat cake croissant powder pie sweet roll powder gummies. Chocolate apple pie pudding pie sesame snaps. Danish wafer chupa chups apple pie. Gingerbread pastry candy canes. Pie bonbon candy chocolate cake dessert.</p>
        </div>

    </div>
</body>
</html>

1 Answer

Josh Nussbaum
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Josh Nussbaum
Full Stack JavaScript Techdegree Graduate 27,472 Points
Josh Nussbaum
.a{fill-rule:evenodd;}techdegree seal-36
Josh Nussbaum
Full Stack JavaScript Techdegree Graduate 27,472 Points

Hey Brendan! I believe you’re looking for the “transition-property“ declaration. Try this -

transition-property: color, background;

You can add more than one value to “transition-property” :)

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property

Brendan Dzeguze
.a{fill-rule:evenodd;}techdegree seal-36
Brendan Dzeguze
Front End Web Development Techdegree Graduate 14,567 Points

Oh, thanks! I had no idea.