Typing Animation with CSS

New Member
1 0 0

Hi, 

 

i want to make the header of a section appear with the typing animation that has been very popular lately. 

 

I am using the Debut theme and had already success with using animation with CSS. 

By adding the following code to the head section of the theme.liquid and by creating a new CSS Asset I was able to do some animations. The only change you make with this method is by adding the animation name to the class function of the section you want to animate. 

 

{{ 'animations.css' | asset_url | stylesheet_tag }}

 

This is the example of CSS - Animation:

.slideDown{
animation-name: slideDown;
-webkit-animation-name: slideDown;
 
animation-duration: 1s;
-webkit-animation-duration: 1s;
 
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
 
visibility: visible !important;
}
 
@keyframes slideDown {
0% {
transform: translateY(-100%);
}
50%{
transform: translateY(8%);
}
65%{
transform: translateY(-4%);
}
80%{
transform: translateY(4%);
}
95%{
transform: translateY(-2%);
}
100% {
transform: translateY(0%);
}
}
 
@-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
}
50%{
-webkit-transform: translateY(8%);
}
65%{
-webkit-transform: translateY(-4%);
}
80%{
-webkit-transform: translateY(4%);
}
95%{
-webkit-transform: translateY(-2%);
}
100% {
-webkit-transform: translateY(0%);
}
 
My problem is that i cant do the typing animation. I tried already several examples from the internet but nothing worked. Does somebody have an idea how it could work with my current setting ?
 
Thank you in advance !
Kind Regard
Metin
0 Likes