Identifying the Issue
Your statement:
You mentioned that the entire page is being animated for some unknown reason.
This is actually the expected outcome when utilizing this code block:
* {
-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 * signifies that any CSS attributes designated for that selector will be applied to every element within your webpage.
The use of all in the property transition implies that any animatable properties of those elements will indeed be animated.
Hence, combining the CSS selector * with the CSS property transition: all results in animation of all possible animatable properties across every HTML element present on your website.
Resolution 1 : Target Specific Elements for Animation
An alternative approach could involve the following adjustment:
/** Remove 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;
}
Following this modification, append class=animate to each element you wish to animate within your HTML:
<ul class="animate">
...
</ul>
Several other implementations can also be explored; however, this represents one of the simpler options. For optimal strategy, refer to "Additional enhancements" below.
Resolution 2 : Disable Unwanted Animations
Trying the following action might resolve the issue:
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 indicated testing this solution, but it wasn't evident in your provided code. Ensure it is positioned AFTER the * selector.
Further Enhancements
To ensure better performance and avert unexpected outcomes, it's advisable to solely apply animations to specific properties and elements slated for animation.
For instance, if you aim to animate both width and height of your div elements, consider this format:
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 restricting animation to solely the background of your #navigation li elements is desired, utilize a structure like the one presented below:
#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;
}