Unexpected animation in CSS [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am working on a static website and have some animations in CSS:
*
{
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
This is fine and everything and every page is animated in the same way except one of my HTML documents which also contains input elements and a textarea:
<form action="script/contact-form.php" method="post">
<b>Full name:</b><br/>
<input type="text" name="name" /><br/>
<b>Subject:</b><br>
<input type="text" name="subject" /><br/>
<b>E-mail:</b><br>
<input type="text" name="email" />
<br/><br/>
<b>Your comments:</b><br/>
<textarea name="comment"></textarea>
<br/><br/>
<input type="submit" value="Submit" />
</form>
For some reason the entire page is then animated (unlike the other pages, which are using the same stylesheet). I tried disabling this with:
form, input, textarea
{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in-out;
-ms-transition: color 0 ease-in-out;
transition: none;
}
but it doesn't seem to have any effect. Here is what it looks like: http://notrussian.de/stack/contact-us.html. Clicking on other pages without the form has different effects.
This is starting to drive me nuts and I really hope you guys could help me out.
Thanks in advance.

Answer 1

What is going wrong
You say :
For some reason the entire page is then animated
That's the expected behaviour when you use this code :
* {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
The CSS selector * means that any CSS properties for that selector are applied to every element on your web page.
The value all for property transition means that every property of those elements that can be animated will be animated.
So, the combination of CSS selector * and CSS property transition: all means that every property that can be animated will be animated for every HTML element on your web page.
Solution 1 : Animate ONLY what you want to animate
You could do something like this :
/** Get rid of this code
* * {
* -webkit-transition: all 1s ease-in-out;
* -moz-transition: all 1s ease-in-out;
* -o-transition: all 1s ease-in-out;
* -ms-transition: all 1s ease-in-out;
* transition: all 1s ease-in-out;
* }
*/
.animate, .animate * {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
Then, in your HTML, add class=animate to every element you want to animate :
<ul class="animate">
...
</ul>
There are many alternative implementations, but this is one of the easiest ones. For the best approach, see "Additional improvements" herebelow.
Solution 2 : Disable animation for what you DON'T want to animate
This should work :
form, input, textarea {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in-out;
-ms-transition: color 0 ease-in-out;
transition: none;
}
You say you tried it, but I can't find it anywhere in your code when I go to the page you referenced. Anyway, make sure you put it BEHIND the * selector.
Additional improvements
For the sake of performance AND to prevent unexpected behavior, it's best to always set animation ONLY for those properties and those elements you really want to animate.
So, if you want to animate both the width and height of your div elements, you should do something like this :
div {
-moz-transition: width 2s, height 4s;
-webkit-transition: width 2s, height 4s;
-o-transition: width 2s, height 4s;
-ms-transition: width 2s, height 4s;
transition: width 2s, height 4s;
}
If you want to animate just the background of your #navigation li elements, you should do something like this :
#navigation li {
-moz-transition: background 1s ease-in-out;
-webkit-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}