실습문제 5-10
WEB/TRAINNING 2017. 11. 7. 13:19 |10. <p> 문단의 텍스트가 오른쪽 끝에서 시작하여 왼쪽으로 3초에 걸쳐 펼쳐지도록 CSS3 애니메이션을 작성하라.
애니메이션은 1회만 진행한다.
<p> 문단을 오른쪽 끝에 출력하려면 margin-left : 100%로, 왼쪽에 출력하려면 margin-left : 0%으로 하면 된다
웹 페이지를 열면 '질문있습니다'가 3초에 걸쳐 슬라이딩 된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html> <html> <head> <title></title> </head> <style> @keyframes a { from { margin-left: 100%; } to { margin-left: 0%; } } strong { padding: 3px; border: 2px solid black; } p { animation-name: a; animation-duration: 3s; animation-iteration-count: 1; } </style> <body> <h3>애니메이션 응용</h3> <hr> <p><span><strong>?</strong>질문 있습니다.</span></p> </body> </html> | cs |