CSS/focusアクション

input[type="text"] {
	width: 50%;
	margin: 15px 15px 15px 55px;
}

#name1:focus{
	box-shadow: 0px 0px 10px blue;
}

#name2:focus{
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5) inset;
	border: 0.1px inset black;
	transition: 0.3s;
}

#name3:focus{
	box-shadow: 0px 0px 5px blue;
	transform: scale(1.2);
}

#name4:focus{
	animation: fc 3s linear infinite;
}
@keyframes fc{
	0%   { box-shadow: 0px 0px 10px blue;}
 	50%  {box-shadow: 0px 0px 10px green; }
	100% { box-shadow: 0px 0px 10px red;}
}

#name5:focus{
	transform: rotate(360deg) scale(1.1);
	transition: 0.5s;
}

#name6 {
	width: 10%;
	box-shadow: 0px 0px 5px rgba(145,22,140,0.5);
	transition: 0.2s
}
#name6:focus{
	width: 50%;
	transition: 0.2s;
}

#sample7 span{
	display: none;
	background: rgba(50,140,80,0.7);
	color: white;
	padding: 10px;
}
#name7:focus {
	box-shadow: 0px 0px 13px rgba(100,200,50,0.9);
}
#name7:focus + span {
	display: inline;
}

#name8{
	outline:2px solid transparent;
	outline-offset:50px;
	transition:0.5s all ease;
}
#name8:focus{
	outline:3px double #003567;
	outline-offset: 0;
}
#name8:active{
	position:relative;
	top:2px;
    -webkit-box-shadow:0px 0px 0px #000;
    -moz-box-shadow:0px 0px 0px #000;
    box-shadow:0px 0px 0px #000;
}