transition : 요소의 속성이 바뀔때 전환되는 효과를 보여준다
transition : property duration delay type
property 을 delay 후에 duration 동안 type 효과를 보여준다
html)
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 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0"> <title>Insert title here</title> <style> .photo img { width: 100px; opacity: 0.5; -webkit-transition: all 3s 0.5s ease; -moz-transition: all 3s 0.5s ease; -ms-transition: all 3s 0.5s ease; -o-transition: all 3s 0.5s ease; /* transition : property duration delay type property 을 delay 후에 duration 동안 type 효과를 보여준다 */ transition: all 3s 0.5s ease; /* 풀어서 사용한 예) transition-property: all; transition-duration: 3s; transition-delay: 0.5s; transition-timing-function: ease; */ } .photo img:hover { width: 300px; opacity: 1; } </style> </head> <body> <div class="photo"> <img src="images/testimage.jpg" /> </div> </body> </html> | cs |
결과
이미지를 터치하면 반투명하며 작았던 이미지가 불투명하고 커지는 효과를 보여준다
'IT > - 프로그래밍' 카테고리의 다른 글
| HTML5/CSS3 transform : translate - 요소 이동 (0) | 2017.06.21 |
|---|---|
| HTML5/CSS3 animation : 애니메이션 (0) | 2017.06.20 |
| HTML5/CSS3 그라디언트 (0) | 2017.06.18 |
| HTML5/CSS3 column-span: all : 합쳐야 하는 다단 부분에 지정 (0) | 2017.06.17 |
| HTML5/CSS3 column-count : float 없이 다단 레이아웃 만들기 (0) | 2017.06.16 |