Как оживить шрифт с CSS3?

Я хочу использовать только HTML5 и CSS3 как можно больше на моем сайте.Как оживить шрифт с CSS3?

Я пытаюсь анимировать текст на моей контактной кнопке. В частности, я хочу, чтобы он менял цвет и был font-weight: bolder 4 секунды каждые 20 секунд.

Прямо сейчас он переключает цвета, но он просто не будет выделен в Chrome, Safari и Opera. Он отлично работает в Firefox и IE.

Вот CSS я использую:

#contact { 
position: fixed; 
margin-top: 63px; 
margin-left: 680px; 
width: 250px; 
height: 55px; 
transform:rotate(-36.87deg); 
z-index: 20 !important; 
font-size: 24px; 
line-height: 55px; 
text-align: center; 
text-decoration: none; 
color: #FFFFFF; 
transition: all 1s ease; 
animation-name: alarmlight; 
animation-iteration-count: infinite; 
animation-duration: 20s; 
} 

@keyframes alarmlight { 
0% { color: #FFFFFF; font-weight: normal; } 
80% { color: #FFFFFF; font-weight: normal; } 
85%{ color: #00F; font-weight: bolder; } 
90% { color: #F00; font-weight: bolder; } 
95% { color: #00F; font-weight: bolder; } 
100% { color: #F00; font-weight: bolder; } 
} 

a#contact:hover { 
color: #FFF101 !important; 
font-weight:bold !important; 
animation-name:none; 
transition: all 1s ease; 
transform: translate(18px,-18px) rotate(-36.87deg); 
}

Проверить Here, чтобы увидеть его в действии.

Обновление: также созданный простой jsfiddle, чтобы показать проблему в своем ядре.

Обновление: Обновлен CSS в этом сообщении, чтобы отразить код im, используемый в текущем состоянии.

источник

2013-10-12 Jeroen

Возможный дубликат [Font-Weight CSS Transition в Chrome] (http://stackoverflow.com/questions/16629725/font-weight-css-transition-in-chrome) –

Я прочитал сообщение, это другое проблема. Я не просил плавного перехода. Его просто отлично, если он просто переключится на полужирный в течение 4 секунд, а затем снова не будет полужирным в течение 16 секунд. Кроме того, im не использует числовые значения. Я использую только обычный и смелый. Насколько я знаю, это должно быть возможно. – Jeroen

@Juhana Я понимаю, почему вы изменили тему «font-weight: bolder', я не знал, как это сделать. Просто из любопытства, почему вы забрали «Спасибо заранее» в нижней части моего сообщения? – Jeroen

Я действительно думаю, что браузеры могут не поддерживать шрифт в анимации, хотя это listed as a supported property. В то время как я играл с ним, я обновить jsfiddle с кучей нового кода, чтобы очистить вещи, как ...

0% { color: #FFFFFF; font-size:1em; }

... не комбинируя анимации (без причины иметь два), добавил префикс -бесплатно (чтобы избежать всех этих префиксов), и из эксперимента использовали шрифт-шрифт вместо font-weight (по крайней мере, это работает).

источник

2013-10-13 06:52:41

Это кажется странным, правда? Кто-нибудь знает это точно? Спасибо за трюки, как я сказал им, новичок, поэтому я решил, что он еще не будет идеальным;) У меня уже было ощущение, что анимация может быть превращена в одну, просто не знала, как это сделать точно, и это работал: P. Спасибо, что поняли это. Особая благодарность за то, что указала мне на префикс-бесплатный, действительно отличный плагин! Я заметил также в вашем обновленном jsfiddle, текст до сих пор не меняется на желтый при наведении, а он должен ... Любая идея, почему это так? – Jeroen

Хорошо, поиграл с ним еще немного. Когда я запускаю этот [JSFiddle] (http://jsfiddle.net/LUMwc/5/) во всех браузерах, результаты путают меня еще больше. В Firefox: Работы PERFECT. Делает именно то, что я хочу делать (и что он должен делать). В Chrome: Не наводите желтый цвет на зависание. Не выделяется жирным шрифтом во время анимации. В IE: Не окрашивается желтым NOR при наведении курсора. Во время анимации они становятся полужирным. В Opera: Не желтеет на зависании. Не выделяется жирным шрифтом во время анимации. В Safari: Не желтеет на зависании. Не выделяется жирным шрифтом во время анимации. Кто-нибудь? – Jeroen

Я думаю, что я попытался бы удалить как можно больше постороннего кода и просто сделать супер-базовый jsfiddle, который четко показывает проблему (без наклонного текста и т. Д.), Чтобы увидеть, можете ли вы получить свежие глаза на нее, отключенный временем, проведенным просеиванием через ненужный код. Поскольку он не становится желтым, я предполагаю, что это связано с тем, что анимация постоянно работает, и даже несмотря на то, что она делает желтую за незаметную секундную секунду, анимация затем говорит, что она снова станет белой. Если вам не нужна анимация, запущенная при наведении, добавьте «имя анимации: нет»; к: зависанию. –

Как оживить шрифт с CSS3?

ответ

Смежные вопросы