Jade_o.o
[css] animation 실습2 - 문장 움직이기 본문
p태그에 담긴 문장이 오른쪽에서 왼쪽으로 움직이는 animation 효과를 구현해보자!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css_test21.css">
</head>
<body>
<p>
"As I relax on the sofa and gaze around a room a thought hits me: this is exactly the place I've been looking for all my life. A little hideaway in some sinkhole somewhere. I'd always thought of it as a secret, imaginary place, and can barely believe that it actually exists. I close my eyes and take a breath, and wonder of it all settles over me like a gentle cloud."
</p>
</body>
</html>html 코드
p {
position: fixed;
animation: sentence-slide 3s steps(100, end);
}
@keyframes sentence-slide {
from {
left: 100%;
width: 100%;
}
to {
left: 0%;
width: 100%;
}
}css 코드
'CSS' 카테고리의 다른 글
| [css] css 공부 정리3_간단한 속성들 (0) | 2024.01.13 |
|---|---|
| [css] css 공부 정리2_selector(선택자) (0) | 2024.01.13 |
| [css] transform 실습 - 함수 여러개 사용 (0) | 2024.01.13 |
| [css] animation 실습 - 공 움직이기 (1) | 2024.01.13 |
| [css] transition & transform 실습 - 이미지 연달아 나열하기 (1) | 2024.01.13 |
'CSS' Related Articles
more
