изменение текста диапазона в значок с ключевыми кадрами css

Question

Я сделал некоторые текстовые анимации с помощью jquery typing plugin TypeIt.js (http://macarthur.me/typeit/). Теперь у меня есть следующая проблема: Я хочу анимировать набранный < 3 значку сердца с ключевыми кадрами css и вам нужна ваша помощь. Это не должно быть на парении, он должен измениться после определенной задержки (возможно 1sek после TypeIt.js напечатал мой < 3 Текст

Вот мой код, который не работает:.

.hearticon { 
 
    animation-name: switch; 
 
    animation-delay: 1s; 
 
    animation-duration: 0.7s; 
 
    animation-timing-function: ease-in; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@-webkit-keyframes switch { 
 
    from { 
 
    opacity: 0; 
 
    } 
 

 
    100% { 
 
    opacity: 1; 
 
    background: url(img/heart.png); 
 
    width: 15px; 
 
    height: 15px; 
 
    } 
 

 
} 
 

 
@keyframes switch { 
 
    from { 
 
     opacity: 0; 
 
    } 
 

 
    100% { 
 
     opacity: 1; 
 
     background: url(img/heart.png); 
 
     width: 15px; 
 
     height: 15px; 
 
    } 
 

 
    }

<span class="hearticon"><3</span>

Я должен сказать, что я никогда не работал с CSS ключевыми кадрами раньше. Спасибо за помощь

Answer 1

Я хотел бы использовать position: absolute; для этого случая в вашей ключевой кадр а nimation. Я также предлагаю использовать сокращенную строку для вашей анимации. Это немного более эффективно с точки зрения записи меньше И, когда страница загружается, ей не нужно проходить через 5 строк кода, вместо этого она читает 1 строку и все же делает то же самое. Простой наконечник, чтобы помочь вам/производительность в любом случае.

Что касается вашего вопроса, ниже работ, о которых вы просили.

HTML:

<span class="hearticon"><3</span> 

CSS:

.hearticon { 
    animation: switch .7s ease-in forwards 1s; //Shorthand string versus having 5 lines of code here...('switch' = animation-name), ('.7s' = animation-duration), ('ease-in' = animation-timing-function), ('forwards' = animation-fill-mode), and ('1s' = animation-delay) 
} 

@-webkit-keyframes switch { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    background-image: url("http://image.flaticon.com/icons/png/128/148/148836.png"); //Put your own image here 
    position: absolute; 
    width: 128px; //Adjust to your size 
    height: 128px; //Adjust to your size 
    } 
} 

@keyframes switch { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    background-image: url("http://image.flaticon.com/icons/png/128/148/148836.png"); //Put your own image here 
    position: absolute; 
    width: 128px; //Adjust to your size 
    height: 128px; //Adjust to your size 
    } 
} 

Другие советы: При работе с ключевыми кадрами, которые вы можете думать об использовании поставщика предустановок-исправления для Firefox, IE и оперы, а также , Я вижу, что у вас есть хром и сафари, которые используют предварительную установку -webkit-, но если вы хотите, чтобы ваш сайт был совместим с несколькими браузерами, я бы предложил добавить -moz-, -o и -ms- как есть.

Ex:

.hearticon { 
    -ms-animation: switch .7s ease-in forwards 1s; //Used for IE 
    -webkit-animation: switch .7s ease-in forwards 1s; //Used for chrome & safari 
    -moz-animation: switch .7s ease-in forwards 1s; //Used for Mozilla Firefox 
    -o-animation: switch .7s ease-in forwards 1s; //Used for Opera 
    animation: switch .7s ease-in forwards 1s; //Will become standard 
} 

, а также:

@-ms-keyframes switch { 
    0% { 
     // Your code here 
    } 
    100% { 
     // Your code here 
    } 
} 
@-webkit-keyframes switch { 
    0% { 
     // Your code here 
    } 
    100% { 
     // Your code here 
    } 
} 
@-moz-keyframes switch { 
    0% { 
     // Your code here 
    } 
    100% { 
     // Your code here 
    } 
} 
@-o-keyframes switch { 
    0% { 
     // Your code here 
    } 
    100% { 
     // Your code here 
    } 
} 
@keyframes switch { 
    0% { 
     // Your code here 
    } 
    100% { 
     // Your code here 
    } 
} 

И, наконец, рабочий DEMO