анимация через css3 переход

Мне нужно создать анимацию, которая тригерредна, когда курсор нависает над ней. Анимация - это аббревиатура, которая расширяется до полной формы, например, когда я навешиваю «CSS3». он должен расширяться до «каскадной таблицы стилей» с восходящей буквой «C» и «S» с буквами, идущими один за другим, это будет возможно только через CSS3? (примечания редактора, я полагаю, он означает, что новые буквы печатаются, а затем просто появляются сразу)анимация через css3 переход

источник

2012-03-22 tim

Я отредактировал (но дождался его принятия), говоря, что я предполагаю, что вы хотите, чтобы вы хотели, чтобы новые буквы выглядели так, будто они набираются по одному, а затем появляются сразу сразу. – thecoshman

Также вы действительно используя вспышку для этого? или это, как я подозреваю, на самом деле просто HTML с CSS – thecoshman

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

Если вы используете флешку, просто используйте фрагмент ролика и бит Action Script, чтобы вызвать анимацию.

Однако, я считаю, что вы на самом деле используете HTML/CSS/JS (материал веб-браузера), и в этом случае вам нужно будет использовать какой-то JavaScript. Я предлагаю вам взглянуть на JQuery, хорошую библиотеку, которая позволит очень легко обнаружить эффект зависания, а затем манипулировать тем, что он говорит.

Вы, вероятно, нужно что-то вроде ...

<span class="ExpandingAbreviation"> 
    <span class="short">CSS3</span> 
    <span class="Long">cascading style shet</span> 
</span>

Тогда в вас стилей, сделать Длинные скрыты, и через Jquery, вам нужно будет настроить слушателя для события наведения мыши на «короткие» и напишите код, чтобы скрыть это и показать долго. Хотя, я не уверен точно, какой эффект вы оказываете после

источник

2012-03-22 08:42:48 thecoshman

То же самое можно сделать, изменив значение InnerHTML на Mouseover() в Js.

<body> 
<script type=text/javascript> 
function changetext() 
{ 
document.getElementById("change").innerHTML='<p>Cascading Style Sheets<p>' 
} 
</script> 
<div id="change" onmouseover="changetext();">css</div> 
</body>

Но я не думаю, что можно изменить текст в css3. Мы можем добавить эффекты перехода, чтобы хорошо выглядеть.

источник

2012-03-22 09:01:05 gout

-1

Я построил jsfiddle, который делает то, что вам нравится. Я думаю, что это самый простой способ понять, что происходит. Все, что вам нужно для этой функции, - jQuery. Просто нажмите «CSS», чтобы попробовать.

http://jsfiddle.net/njZXj/5/

источник

2012-03-22 09:51:03 devsnd

Вы можете, скорее всего, сделать это с помощью CSS 3.

Вот намек я сделал:

Js Fiddle (Наведите курсор мыши на слово CSS, чтобы увидеть эффект)

Это можно сделать с помощью некоторых классов и просто пробелов. Для простоты я просто использовал P-Tag и Span внутри.

Надеюсь, это поможет!

EDIT

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

источник

2012-03-22 15:36:47 Shion