CSS3 логотип анимация?

Question

Мне нужно анимировать логотип, есть пример по этой ссылке (http://www.minmedia.nl/footer)

Моя проблема заключается в следующем: Только «Webdesign на» части и две цветные таблетки часть логотипа должна быть видна в начале анимации. Когда вы наводите на него курсор, таблетка должна двигаться влево, часть «webdesign by» должна теперь исчезнуть. Кроме того, когда «таблеточная» часть логотипа сдвигается влево, конечная часть логотипа должна стать видимой и скользить по левому краю. Так что окончательный дисплей будет полным логотипом. Когда вы снова перемещаете мышь, она должна быть обратная, и снова текст «веб-дизайн» и «таблеточная» часть логотипа должны быть видны.

У меня есть базовое понимание HTML и CSS, но у меня нет опыта работы с анимациями/переходами CSS3.

Если кто-то может помочь мне, это было бы здорово, или если бы вы узнали ссылку на страницу, которая могла бы помочь мне в этом и быть отличным.

Answer 1

Ниже приведен пример того, как вы, , можете использовать ключевые кадры для этого.

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

Я также сделал предположение, что ваше изображение 80px * 80px, но это можно отрегулировать.

.wrap { 
 
    width: 200px; 
 
    position: relative; 
 
    height: 80px; 
 
    vertical-align: middle; 
 
    overflow:hidden; 
 
} 
 
.wrap img { 
 
    height: 80px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: calc(100% - 80px); 
 
    -webkit-animation: 3s picMove forwards; 
 
    animation: 3s picMove forwards; 
 
} 
 
.wrap div { 
 
    display: inline-block; 
 
    position: absolute; 
 
    height: 80px; 
 
    line-height: 80px; 
 
    top: 0; 
 
} 
 
.firstText { 
 
    left: 0; 
 
    -webkit-animation: 3s fade forwards; 
 
    animation: 3s fade forwards; 
 
    opacity: 0; 
 
} 
 
.secondText { 
 
    left: 100%; 
 
    -webkit-animation: 3s movefade forwards; 
 
    animation: 3s movefade forwards; 
 
} 
 
@-webkit-keyframes fade { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@keyframes fade { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    opacity: 0; 
 
    } 
 
} 
 
@keyframes movefade { 
 
    0% { 
 
    opacity: 0; 
 
    left: 100%; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    left: 80px; 
 
    } 
 
} 
 
@-webkit-keyframes movefade { 
 
    0% { 
 
    opacity: 0; 
 
    left: 100%; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    left: 80px; 
 
    } 
 
} 
 
@-webkit-keyframes picMove { 
 
    0% { 
 
    left: calc(100% - 80px); 
 
    } 
 
    100% { 
 
    left: 0; 
 
    } 
 
} 
 
@keyframes picMove { 
 
    0% { 
 
    left: calc(100% - 80px); 
 
    } 
 
    100% { 
 
    left: 0; 
 
    } 
 
}

<div class="wrap"> 
 
    <div class="firstText">First</div> 
 
    <img src="http://placekitten.com/g/300/300" /> 
 
    <div class="secondText">Second</div> 
 
</div>