Currently, I am incorporating animations into my project using HTML5 and CSS3, and the progress has been smooth. I have been able to achieve effects such as:
#someDivId {
position: absolute;
background:rgba(255,0,0,0.75);
transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
#someDivId:hover {
background:rgba(255,0,0,1);
}
This code snippet modifies the opacity of my red div from 0.75 to 1 on hover. It also works for other properties like the color attribute or even the border-radius.
However, I encounter issues when attributes are automatically adjusted while manipulating the DOM with JavaScript, such as changes in the height or width due to adding an src to an img element or inserting content into a div.
In the case of images, I have defined the following CSS:
.someImageClass {
border-color: white;
border-width: 15px;
border-style: solid;
max-height:370px;
max-width:370px;
transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-webkit-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
}
The image is dynamically loaded into the DOM using JavaScript:
var image = document.createElement("img");
image.src = someSourceURL;
image.className = "someImageClass";
document.getElementById("someDiv").appendChild(image);
Initially, the image appears as a square within the container DIV. Before the image content fully loads, it looks like this:
https://i.sstatic.net/WygE7.png
Once the src content is loaded, it assumes this appearance:
https://i.sstatic.net/vpXbz.png
No animations are observed during these transitions.
I have noticed at least two size changes for the img: one from having no size or style to obtaining a certain size based on styling, and another from initially being just a node with margins and sizes to incorporating content and adjusting its dimensions. The latter change concerns me more, and I am uncertain about the technical occurrence of the first.
Is there a method to manage these size alterations triggered by content manipulation solely through CSS selectors and transitions?