Эффект выделения с использованием css3

Я пытаюсь получить эффект выделения с помощью css3. Его работа по оси X, но я хотел, чтобы он работал вдоль оси Y, т.е. снизу вверх. Вот мой кодЭффект выделения с использованием css3

Index.html:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<link rel="stylesheet" href="main.css"> 
</head> 
<body> 
<h1 class="marquee"> 
    <span>Hi I m ur marquee!!</span> 
</h1> 
</body> 
</html>

Css

@keyframes marquee { 
0% { -webkit-transform: translate(0,0); } 
100% { -webkit-transform:translate(-100%,0); } 
} 

@-webkit-keyframes marquee { 
0% { -webkit-transform: translate(0,0); } 
100% { -webkit-transform:translate(-100%,0); } 
} 

.marquee { 
width: 100%; 
overflow: hidden; 
white-space: nowrap; 
animation: marquee 17s linear infinite; 
-webkit-animation: marquee 17s linear infinite; 
    } 

     .marquee:hover { 
-webkit-animation-play-state: paused; 
animation-play-state: paused; 
}`

источник

2014-12-28 kdr

Если я правильно вас понял, вы должны изменить -webkit-transform:translate(x,y);y значение для непрерывного эффекта я изменил 100% до 50% и установить высоту на 100%

html, 
 
body, 
 
h1 { 
 
    height: 100% 
 
} 
 

 
@-webkit-keyframes marquee { 
 
    0% { 
 
    -webkit-transform: translate(0, 0%); 
 
    } 
 
    25% { 
 
    -webkit-transform: translate(0, -30%); 
 
    } 
 
    26% { 
 
    opacity:0; 
 
    -webkit-transform: translate(0, 110%); 
 
    } 
 
    27% { 
 
    opacity:1; 
 
    -webkit-transform: translate(0, 110%); 
 
    } 
 
    100% { 
 
    -webkit-transform: translate(0, 0%); 
 
    } 
 
    
 
} 
 
.marquee { 
 
    width: 100%; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    -webkit-animation: marquee 5s linear infinite; 
 
} 
 
.marquee:hover { 
 
    -webkit-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
} 
 
`

<h1 class="marquee"> 
 
    <span>Hi I m ur marquee!!</span> 
 
</h1>

источник

2014-12-28 15:56:47

Привет @Vitorino спасибо большое за ответ. Эффект почти нормально, но все же требуется 2 модификации. Здесь текст перемещает фрейм снизу вверх и после достижения вершины он перемещается назад. Я хочу, чтобы он выходил из экрана, когда он достиг вершины и появлялся снизу. Подобно этому http://codepen.io/aamirafridi/pen/GgoXyy – kdr

Я отредактировал свой ответ, пожалуйста, проверьте @kdr –

Большое вам спасибо за ваш время и усилие :) – kdr

Эффект выделения с использованием css3

ответ

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