210707開発ログ

Transforms

- transform

<div class="transform"></div>

.transform 
	{width: 300px;
	height: 300px;
	background: yellow;

	/*transform: rotate(-10deg);*/
	/*transform: scale(0.5, 0.5);*/
	/*transform: skew(-10deg, 20deg);*/
	/*transform: translate(100px, 300px);*/

	/*margin-left: 300px;*/
	/*margin-top: 500px;*/

	transform: rotate(10deg);}

Transition

<div class="transition"></div>

.transition 
	{width: 300px;
	height: 300px;
	background-color: yellow;

	/*
	transition-property: width;
	transition-duration: 2s;
	transition-timing-function: linear;
	transition-delay: 1s;
	*/

	transition: width 2s linear, height 2s linear;}

.transition:hover 
	{width: 600px;
	height: 600px;}

Animation

<div class="animation"></div>

.animation {
	width: 300px;
	height: 300px;
	background-color: yellow;

	animation-name: changeWidth;
	animation-duration: 3s;
	animation-timing-function: linear;
	animation-delay: 1s;

	animation-iteration-count: infinite;
	animation-direction: alternate;}

@keyframes changeWidth 
	{0% {width: 300px;
		height: 300px;
		background-color: yellow;}

	50% {background-color: blue;}

	100% {width: 600px;
		height: 600px;
		background-color: red;}

<div class="spin-lion"></div>

.spin-lion {
	width: 150px;
	height: 150px;
	background-color: blue;

	/*
	animation-name: spinLion;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	*/

	-webkit-animation : spinLion 1.5s linear infinite alternate
	animation : spinLion 1.5s linear infinite alternate;}

@-webkit-keyframes spinLion 
	{form {-webkit-transform: rotate(-10deg);}

	to {-webkit-transform: rotate(10deg);}}

@keyframes spinLion 
	{form {transform: rotate(-10deg);}

	to {transform: rotate(10deg);}}

アニメーションの練習

- 메뉴만들기

	<nav class="mouse-animation">
		<ul>
			<li><a href="#">메뉴1</a></li>
			<li><a href="#">메뉴2</a></li>
			<li><a href="#">메뉴3</a></li>
			<li><a href="#">메뉴4</a></li>
		</ul>
		
	</nav>
    
 html, body 
 	{margin: 0;
	padding: 0;}


ul {list-style: none;}

a {text-decoration: none;
	color: #000000;}


.mouse-animation li 
	{width: 250px;
	background-color: rgba(0, 0, 0, 1);
	padding: 20px;

	border-top: solid 5px #dfdfdf;
	transition: opacity 0.5s, margin-left 0.5s;}

.mouse-animation li:hover 
	{background-color: rgba(0, 0, 0, 0.5);
	margin-left: 10px;}

.mouse-animation li a 
	{color: red;
	font-size: 20px;}

- 움직이는 박스 만들기

<div class="move-box"></div>

.move-box 
	{position: relative;
	width: 200px;
	height: 200px;
	background-color: red;

	animation-name: moveBox;
	animation-duration: 4s;
	animation-timing-function: linear;
	animation-delay: 1s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
	animation-fill-mode: backwards;}

@keyframes moveBox 
	{0% {background-color: green;
		left: 0;
		top: 0;}

	25% {background-color: yellow;
		left: 500px;
		top: 0px;}

	50% {background-color: gray;
		left: 500px;
		top: 500px;
		border-radius: 50%;}

	75% {background-color: blue;
		left: 0px;
		top: 500px;}

	100% {background-color: red;
		left: 0;
		top: 0;}}

 - 움직으는 얇은원

	<div class="outer-border">
		<div class="inner-border"></div>
	</div>
    
.outer-border 
	{display: felx;
	justify-content: center;
	align-items: center;

	width: 200px;
	height: 200px;
	border: solid 15px red;
	border-radius: 50%;

	margin: 0 auto;
	margin-top: 200px;

	animation: outerBorder 2s infinite;}

@keyframes outerBorder 
	{0% { border-color: red; transform: scale(1);}
	25% { border-color: yellow; transform: scale(1.2);}
	50% { border-color: blue; transform: scale(1.3);}
	75% { border-color: green; transform: scale(1.2);}
	100% { border-color: pink; transform: scale(1);}}


.inner-border 
	{width: 75px;
	height: 75px;
	border: 5px solid purple;

	animation: innerBorder 2s infinite alternate;}

@keyframes innerBorder {
	0% { transform: rotate(0deg); }
	25% { border-color: blue; border-width: 10px; }
	50% { border-color: yellow; border-width: 20px; }
	75% { border-color: green; border-width: 40px; }
	100% { border-color: gray; border-width: 50px; transform: rotate(360deg); }}

- 마리오 박스 만들기

	<div class="mario-container">
		<div class="mario-coin"></div>
		<div class="mario-box"></div>
	</div>
    
.mario-container 
	{position: relative;
	width: 500px;
	height: 500px;
	border: solid 10px black;

	margin: 0 auto;
	margin-top: 200px;}



.mario-container .mario-coin 
	{position: relative;
	width: 70px;
	height: 70px;
	background-color: yellow;
	border-radius: 50%;

	margin: 0 auto;
	margin-top: 100px;

	animation: jumpCoin 0.5s linear infinite;}

@keyframes jumpCoin {
	0% 
    	{transform: translateY(0); opacity: 1;}
	50% 
    	{transform: translateY(-100px) rotateY(180deg);
		opacity: 0;}
	100% 
    	{transform: translateY(-100px) rotateY(360deg); opacity: 0;}}


.mario-container .mario-box 
	{width: 100px;
	height: 100px;
	background-color: blue;
	margin: 0 auto;

	animation: jumpBox 0.5s linear infinite alternate;}

@keyframes jumpBox 
	{0% { transform: translateY(0px) }
	50% { transform: translateY(-10px) }
	100% { transform: translateY(0px)}}

 - 움직이는 이미지

	<div class="hover-image">
		<img src="https://img2.pngio.com/sea-beach-background-best-stock-photos-toppng-amazing-beach-background-png-850_778.jpg">

		<div class="image-info">
			<h2>Title</h2>
			<p>Parapragh</p>
		</div>
	</div>

.hover-image
	{cursor: pointer;
	overflow: hidden;
	position: relative;
	width: 400px;
	border: solid 10px #000000;}

.hover-image img 
	{width: 100%;
	vertical-align: middle;
	transition : transform 0.3s linear;}

.hover-image:hover img {transform: scale(1.3);}

.hover-image .image-info 
	{box-sizing: border-box;
	position: absolute;
	width: 100%;

	background-color: rgba(0, 0, 0, 0.5);
	padding: 20px;

	left: 0;
	border: -85px;

	transition: bottom 0.3s linear;}

.hover-image:hover .image-info {bottom: 0;}

.hover-image .image-info h2
.hover-image .image-info p 
	{margin: 0;
	padding: 0;
	color: #fffffff;}

.hover-image .image-info h2 {font-size: 20px;}

.hover-image .image-info p {font-size: 15px;}