Topic: How to add animations to span
demzl25 priority asked 2 years ago
Hi, How can I add animation zoom-in to span with delay like in example below.
*_Expected behavior_*Link: https://mdbootstrap.com/snippets/jquery/demzl25/3805206#html-tab-view
*_Actual behavior_*Link: https://mdbootstrap.com/snippets/standard/demzl25/3802126#html-tab-view
Thanks,Damjan
Michał Duszak staff answered 2 years ago
Hi, you have to add proper CSS:Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3875455#css-tab-view
@keyframes zoomIn {
from {
opacity: 0;
transform: scale3d(.3, .3, .3);
}
50% {
opacity: 1;
}
}
.zoomIn {
animation-name: zoomIn;
}
h3 span {
display:inline-block;
}
.my-p span {
display:inline-block;
}
.word1 {
-webkit-animation-name: zoomIn;
-moz-animation-name: zoomIn;
-o-animation-name: zoomIn;
-ms-animation-name: zoomIn;
animation-name: zoomIn;
animation: zoomIn;
animation-duration: 1s;
animation-delay: 0.1s;
animation-iteration-count: 1;
}
.word2 {
-webkit-animation-name: zoomIn;
-moz-animation-name: zoomIn;
-o-animation-name: zoomIn;
-ms-animation-name: zoomIn;
animation-name: zoomIn;
animation: zoomIn;
animation-duration: 1s;
animation-delay: 1s;
animation-iteration-count: 1;
}
.word3 {
-webkit-animation-name: zoomIn;
-moz-animation-name: zoomIn;
-o-animation-name: zoomIn;
-ms-animation-name: zoomIn;
animation-name: zoomIn;
animation: zoomIn;
animation-duration: 1s;
animation-delay: 2s;
animation-iteration-count: 1;
}
.word4 {
-webkit-animation-name: zoomIn;
-moz-animation-name: zoomIn;
-o-animation-name: zoomIn;
-ms-animation-name: zoomIn;
animation-name: zoomIn;
animation: zoomIn;
animation-duration: 1s;
animation-delay: 3s;
animation-iteration-count: 1;
}
EDIT:
There is an MDB5 way to do things using data-attr approach: https://mdbootstrap.com/snippets/standard/m-duszak/3875534#html-tab-view
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: Pc
- Browser: Chrome 97.0.4692.99
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes