I'm trying to animate a p tag on its sibling input's focus but it won't work. I've made a codepen bellow. I also don't want to use Javascript for the solution.
HTML
<html lang="en"></html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link href="http://ift.tt/29YXb1e" rel="stylesheet"/>
<link href="assets/css/main.css" type="text/css" rel="stylesheet"/>
<title>myCoffee</title>
</head>
<body>
<main class="appContainer">
<div class="app">
<div class="sectionLogin">
<div class="logo"><img src="assets/images/logo.svg" alt="logo"/></div>
<div class="inputLogin">
<div class="textField"></div>
<div class="textField">
<p id="username">Username</p>
<input type="text" name="username"/>
</div>
<div class="textField">
<p id="password">Password</p>
<input type="password" name="password"/>
</div>
</div>
<div class="btnLogin">
<button>LOGIN</button>
</div>
<div class="btnSignup">
<button>SIGN UP</button>
</div>
</div>
</div>
</main>
</body>
CSS
input[name="username"]:focus ~ #username {
perspective: 1000;
transform: translate3d(-50%, 30px, 0);
opacity: 0;
transition: all 150ms ease-out; }
input[name="password"]:focus ~ #password {
perspective: 1000;
transform: translate3d(-50%, 30px, 0);
opacity: 0;
transition: all 150ms ease-out; }
Aucun commentaire:
Enregistrer un commentaire