Issue
<div class="text-center">
<button [disabled]="btnStatus" class="btn btn-secondary buttonSend" type="submit">
<div [hidden]="btnStatus">
Send Message <i class="material-icons" style="vertical-align: -6px;">send</i>
</div>
<div [hidden]="!btnStatus" class="spinner-border spinner-border-sm text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</button>
</div>
In the above HTML code i want to animate the send icon such that it translates on X axix when i hover on the button.
I have tried
.buttonSend:hover .buttonIcon
{
animation: logoAnim 0.5s forwards;
}
@keyframes logoAnim
{
from
{
transform: translateX(0);
}
to
{
transform: translateX(10);
opacity: 0;
}
}
Solution
First of all, remove .buttonIcon
from .buttonSend:hover .buttonIcon {...}
as there is no element with that class name.
.buttonSend:hover {
animation: logoAnim 0.5s forwards;
}
Now, fix the typo where you set the button to translate 10px to the right which is written 10 without mentioning the units which are in pixels px
@keyframes logoAnim {
from {
transform: translateX(0);
}
to {
transform: translateX(10px);
opacity: 0;
}
}
Complete code:
.buttonSend:hover {
animation: logoAnim 0.5s forwards;
}
@keyframes logoAnim {
from {
transform: translateX(0);
}
to {
/* mention the units (px)! */
transform: translateX(10px);
opacity: 0;
}
}
<div class="text-center">
<button [disabled]="btnStatus" class="btn btn-secondary buttonSend" type="submit">
<div [hidden]="btnStatus">
Send Message <i class="material-icons" style="vertical-align: -6px;">send</i>
</div>
<div [hidden]="!btnStatus" class="spinner-border spinner-border-sm text-light" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</button>
</div>
Answered By - Geeky Quentin
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.