-
css태그정리:transition등_210402(금)HTML&CSS 2021. 7. 21. 23:31
#transition
서서히 변하는 애니메이션 효과.
☆속성
*transition-property: 대상 설정
-none | all | 특정대상
*transition-duration:진행 시간
*transition-timing-fuction: 속도감
linear:
-ease-in: 느리게 시작
-ease-out:느리게 끝
*transition-delay:지연시간(시작전 지연시간)
#animation
@keyframes 속성
-from: 시작점
-to: 끝점
-50%: 중간점(%로 지정가능)
@keyframes 이름{
from(직접 지정가능){
시작모양
}
to(직접 지정가능){
끝모양
}
}
애니메이션을 설정하고
- animation-name: (keyframes 의)이름
지정시 애니메이션 사용가능
☆속성
- @keyframes
- animation-name:이름
- animation-duration:실행 시간
- animation-delay: 시작 시간
- animation-direction:종료후 ,처음부터 아님 역방향으로 진행할지 지정
- animation-iteration-count:반복 횟수
- animation-timing-function:키프레임의 전환 형태를 지정
- animation: 위의 속성값 다 지정가능
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/prefixfree.min.js"></script><style>body {display: flex;flex-flow: column wrap;}section {margin: 20px;}div {width: 200px;height: 200px}.container {border: 1px solid black;perspective: 300px;margin-top: 100px;margin-left: 100px;float: left;}.box {background-color: blue;transform: rotateY(135deg);}#back1 {backface-visibility: hidden;}#back2 {backface-visibility: visible;}#ex1 {width: 100px;height: 100px;background-color: blueviolet;border: 1px solid gray;transition-property: width, height, background-color, transform;transition-duration: 2s, 3s, 2s, 3s;transition-timing-function: ease-in-out;}#ex1:hover {background-color: rgb(23, 14, 99);width: 200px;height: 120px;transform: rotate(180deg);}#out {position: relative;width: 500px;height: 200px;margin: 0 auto;border: 1px solid gray;border-radius: 30px;padding: 20px;}#out:hover .box1 {transform: rotate(720deg);margin-left: 250px;}.box1 {position: relative;width: 60px;height: 60px;margin-bottom: 10px;background-color: wheat;border: 1px solid gray;}#no-delay {transition-duration: 3s;}#delay {transition-duration: 3s;transition-delay: 1s;}#ani1 {width: 200px;height: 200px;background-color: indianred;animation-name: change-shape;animation-duration: 2s;}@keyframes change-shape {form {background-color: lightseagreen;border: 1px solid black;}to {background-color: magenta;border-radius: 50%;}}</style></head><body><section><div id="out"><div id="ani1"></div></div></section><section><div class="container"><div class="box" id="back1"><h1>Back</h1></div></div><div class="container"><div class="box" id="back2"><h1>Back</h1></div></div></section><section><div class="box" id="ex1"></div></section><section><div id="out"><div id="no-delay" class="box1"><p>no-delay</p></div><div id="delay" class="box1"><p>delay</p></div></div></section></body></html>cs 'HTML&CSS' 카테고리의 다른 글
HTML에 대한 이해_210406(화) (0) 2021.07.21 css태그정리:transform등_210401(목) (0) 2021.07.21 css태그정리:포지셔닝_210331(수) (0) 2021.07.21 css태그정리_210330(화) (0) 2021.07.21 HTML강의(visual studio code), 기초태그_210329(월) (0) 2021.07.21