I am interested in creating animations using CSS3 transitions. Let's consider the following UL/LI element:
<ul>
<li class="green" id="green" style="display: none;">Contents 1</li>
<li class="red" id="red" style="display: none;">Contents 2</li>
<li class="yellow" id="yellow" style="display: none;">Contents 3</li>
</ul>
It is important to note that these elements are horizontally positioned next to each other (display: inline-block).
Upon clicking a button, I can show these elements without any issue. Here is the HTML code snippet for achieving this:
<a href="#" onclick="$('#green').show();">Make contents 1 visible</a>
<a href="#" onclick="$('#red').show();">Make contents 2 visible</a><br/>
<a href="#" onclick="$('#yellow').show();">Make contents 3 visible</a>
To add animation effects, I can simply apply a specific class to the element with the desired CSS properties like so:
.animate { transition: all linear 5s; opacity: 1; display: inline-block; }
Now, let's change the LI elements to absolute positioning so they all appear at the same location.
The intended animation effect I aim to achieve is as follows:
- Enabling item 2 will cause it to fade in smoothly.
- Subsequently enabling item 1 should trigger a fading in motion along with item 2 moving to the right until item 1 occupies its necessary space.
Moreover, both items do not have fixed widths as their content dynamically changes.
You can refer to this fiddle for a better grasp of the concept:
In summary, I intend to implement an animation where a new item fades in while already visible items move to make room for it accordingly.
I trust that my explanation was clear and concise.
Best regards,