Можно ли анимировать перемещение и выцветание текста с помощью CSS3? - PullRequest
Новая
       11

Можно ли анимировать перемещение и выцветание текста с помощью CSS3?

4 голосов
/ 20 декабря 2011

То, что я пытаюсь сделать, - это сдвинуть первый бит текста вправо, а затем постепенно скрыть скрытый текст ... возможно?

Все еще тестирую пару вещей с помощью CSS3, и мне было интересно, было ли этовозможно: http://jsfiddle.net/ht65k/

HTML 

<ul id="socialnetworks">
    <li>
        <span><a  href="#">Fade in Text</a></span>
        <a href="#">Slide to Right</a>
    </li>
</ul>

CSS 

#socialnetworks li{
    /*border-bottom: 1px #ddd solid;
    padding-bottom: 5px;
    margin-bottom: 5px;*/
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    }

#socialnetworks li:hover{ padding-left: 120px; }
#socialnetworks span{ display: none; }
#socialnetworks span:hover{ display: visible;}

1 Ответ

1 голос
/ 20 декабря 2011

Ты рядом.

  1. visible не является допустимым значением для display
  2. Вам необходимо перейти туда, где применяется псевдокласс :hover, поскольку выне может парить над скрытым элементом.

Демонстрация: http://jsfiddle.net/mattball/r5Hcu. Это не анимированный, но вы должны быть в состоянии выяснить остальное.

Измененный CSS

#socialnetworks li {
    -moz-transition-property: all;
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -moz-transition-duration: 0.8s;
    -webkit-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

#socialnetworks li:hover {
    padding-left: 120px;
}

#socialnetworks span {
    display: none;
}

#socialnetworks:hover span {
    display: inline;
}

Re: анимация свойства display - Переходы на дисплее: свойство .

...