The art of CSS animation in web design - Exploring the magic

Question

The art of CSS animation in web design - Exploring the magic

Here is a code snippet I am looking to implement:

/* Stylish Form */

form input {
  width: 80%;
  font-size: 2rem;
}

.form-label {
  position: absolute;
  left: 1rem;
  font-size: 1.5rem;
  color: #5a5a5a;
  background-color: white;
  transition: 0.5s;
}

form input:focus ~ .form-label {
  position: absolute;
  font-size: 0.7rem;
  top: -0.6rem;
  padding: 0.2em;
  left: 0.5rem;
  color: #0051ff;
  background-color: white;
  transition: 0.2s;
  z-index: 2;
}

<!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>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section>
    <form action="">
      <div class="input-container">
        <input type="text" name="" id="my-input">
        <label for="my-input" class="form-label">hello world</label>
      </div>
    </form>
  </section>
</body>

</html>

I want to add this animation feature to the contact form I have previously mentioned. Any suggestions on how to integrate these two sets of code to achieve my desired outcome?

javascript html jquery css

Answer 1

Answer №1

I found inspiration from webdevtrick.com and morioh.com and decided to customize the code using vanilla JavaScript instead

/** Modified Code By Webdevtrick ( https://webdevtrick.com )  **/

const inputs = document.querySelectorAll("input");

inputs.forEach((input) => {
  input.addEventListener("focusin", (e) => {
    e.target.previousElementSibling.classList.add("active");
  });

  input.addEventListener("focusout", (e) => {
    e.target.previousElementSibling.classList.remove("active");
  });
});

/** Modified Code By Webdevtrick ( https://webdevtrick.com ) **/

* {
  letter-spacing: 3px;
  font-family: "Alegreya Sans SC", sans-serif;
}

body {
  color: white;
  background-color: #f05855;
}

h1 {
  font-size: 60px;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

div.main {
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}

div.main div {
  position: relative;
  margin: 40px 0;
}

label {
  position: absolute;
  top: 0;
  font-size: 30px;
  margin: 10px;
  padding: 0 10px;
  background-color: #f05855;
  -webkit-transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
  transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
}

.active {
  top: -25px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
}

input[type="text"] {
  width: 100%;
  padding: 20px;
  border: 2px solid white;
  font-size: 20px;
  font-weight: 800;
  background-color: #f05855;
  color: white;
}

input[type="text"]:focus {
  outline: none;
}

<!DOCTYPE html>
<!--Modified Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Customized CSS Input Label Animation | Webdevtrick.com</title>

  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="main">
    <h1>CSS Label Animation</h1>
    <div>
      <label for="FirName">First Name</label>
      <input id="FirName" type="text" class="styl" />
    </div>

    <div>
      <label for="LasName">Last Name</label>
      <input id="LasName" type="text" class="styl" />
    </div>

    <div>
      <label for="Messag">Your Message</label>
      <input id="Messag" type="text" class="styl" />
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Answer 2

I found inspiration from webdevtrick.com and morioh.com and decided to customize the code using vanilla JavaScript instead

/** Modified Code By Webdevtrick ( https://webdevtrick.com )  **/

const inputs = document.querySelectorAll("input");

inputs.forEach((input) => {
  input.addEventListener("focusin", (e) => {
    e.target.previousElementSibling.classList.add("active");
  });

  input.addEventListener("focusout", (e) => {
    e.target.previousElementSibling.classList.remove("active");
  });
});

/** Modified Code By Webdevtrick ( https://webdevtrick.com ) **/

* {
  letter-spacing: 3px;
  font-family: "Alegreya Sans SC", sans-serif;
}

body {
  color: white;
  background-color: #f05855;
}

h1 {
  font-size: 60px;
  margin: 0px;
  padding: 0px;
  text-align: center;
}

div.main {
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}

div.main div {
  position: relative;
  margin: 40px 0;
}

label {
  position: absolute;
  top: 0;
  font-size: 30px;
  margin: 10px;
  padding: 0 10px;
  background-color: #f05855;
  -webkit-transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
  transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
}

.active {
  top: -25px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
}

input[type="text"] {
  width: 100%;
  padding: 20px;
  border: 2px solid white;
  font-size: 20px;
  font-weight: 800;
  background-color: #f05855;
  color: white;
}

input[type="text"]:focus {
  outline: none;
}

<!DOCTYPE html>
<!--Modified Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Customized CSS Input Label Animation | Webdevtrick.com</title>

  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <div class="main">
    <h1>CSS Label Animation</h1>
    <div>
      <label for="FirName">First Name</label>
      <input id="FirName" type="text" class="styl" />
    </div>

    <div>
      <label for="LasName">Last Name</label>
      <input id="LasName" type="text" class="styl" />
    </div>

    <div>
      <label for="Messag">Your Message</label>
      <input id="Messag" type="text" class="styl" />
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>

Answer 3

Answer №2

Give this a try, I've made some adjustments to your template and added an animation effect.

* {
  --input-height: 3rem;
}
.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
section {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-content: center;
}

.input-container input {
  height: var(--input-height);
  width: 80vw;
  font-size: 2rem;
}

.input-container {
  position: relative;
  display: grid;
  place-items: center start;
  margin-top: 6px;
  margin-bottom: 16px;
  width:50%;
}

.input-container label {
  position: absolute;
  left: 1rem;
  font-size: 1.5rem;
  color: rgb(90, 90, 90);
  background-color: white;
  transition-duration: 0.5s;

}

.input-container input:focus~label {
  position: absolute;
  font-size: 0.7rem;
  top: -0.6rem;
  padding: 0.2em;
  left: 0.5rem;
  color: rgb(0, 81, 255);
  background-color: white;
  transition-duration: 0.2s;
  z-index: 2;
  
}
input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  opacity: 0.9;
}
@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }

<!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>
  <link rel="stylesheet" href="style.css">
</head>

<body>
</br></br>
  <section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div style="text-align:center">
        <div class="section-title">
          <h2><br/>Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
  <div class="row">
        <div class="column">
    <form name="myform" action="thankyou.html" method="POST" novalidate>
      <div class="input-container">
     <input type="text" id="first name" name="firstname" required>
        <label for="firstname">First Name</label>
      </div>
      <div class="input-container">
     <input type="text" id="lastname" name="lastname" required>
         <label for="lastname">Last Name</label>
      </div>
      
      <input type="submit" value="Submit">
    </form>
    </div>
    </div>
    </div>
    
  </section>
</body>

Answer 4

Give this a try, I've made some adjustments to your template and added an animation effect.

* {
  --input-height: 3rem;
}
.contactform {
  position: relative;
  border-radius: 50px;
  background-color: #f2f2f2;
  padding: 5px;
  z-index: 2;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 1%;
  width: 100%;
  animation-name: gradient;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.contactform:hover {
  animation-name: gradient;
  animation-duration: 15s;
  animation-iteration-count: infinite;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.column {
  float: center;
  width: 50%;
  margin-top: 6px;
  padding: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
section {
  height: 100vh;
  width: 100vw;
  display: grid;
  place-content: center;
}

.input-container input {
  height: var(--input-height);
  width: 80vw;
  font-size: 2rem;
}

.input-container {
  position: relative;
  display: grid;
  place-items: center start;
  margin-top: 6px;
  margin-bottom: 16px;
  width:50%;
}

.input-container label {
  position: absolute;
  left: 1rem;
  font-size: 1.5rem;
  color: rgb(90, 90, 90);
  background-color: white;
  transition-duration: 0.5s;

}

.input-container input:focus~label {
  position: absolute;
  font-size: 0.7rem;
  top: -0.6rem;
  padding: 0.2em;
  left: 0.5rem;
  color: rgb(0, 81, 255);
  background-color: white;
  transition-duration: 0.2s;
  z-index: 2;
  
}
input[type=submit] {
  background-color: #0563bb;
  color: white;
  padding: 12px 20px;
  border: none;
  cursor: pointer;
}

input[type=submit]:hover {
  opacity: 0.9;
}
@media screen and (max-width: 600px) {
  .column,
  input[type=submit] {
    width: auto;
    margin-top: 0;
  }
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }

<!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>
  <link rel="stylesheet" href="style.css">
</head>

<body>
</br></br>
  <section id="contact">
  <div class="container" data-aos="fade-up">
    <div class="contactform">
      <div style="text-align:center">
        <div class="section-title">
          <h2><br/>Get In Touch</h2>
        </div>
        <p>Feel Free To Reach Out To Me Through This Form! </p>
      </div>
  <div class="row">
        <div class="column">
    <form name="myform" action="thankyou.html" method="POST" novalidate>
      <div class="input-container">
     <input type="text" id="first name" name="firstname" required>
        <label for="firstname">First Name</label>
      </div>
      <div class="input-container">
     <input type="text" id="lastname" name="lastname" required>
         <label for="lastname">Last Name</label>
      </div>
      
      <input type="submit" value="Submit">
    </form>
    </div>
    </div>
    </div>
    
  </section>
</body>

The art of CSS animation in web design - Exploring the magic

Answer №1

Answer №2

Similar questions

Utilize the same variable within a React functional component across multiple components

Using GULP and NODE, what is the best way to retrieve the Jenkins BUILD_NUMBER in JavaScript?

Angular data binding is not reflecting updates

React Typescript: exploring the power of dynamic types

Counting Numbers with jQuery Animation from Zero to Percentage Value

GeoJson with timestamp and marked directional indicator

What could be causing this Javascript code to not increase by 1?

Use a conditional statement for each element within the array

Troubleshooting the canLoad problem caused by returning an observable with a 404 error

Unpredictable Results with JSON Data

Leverage JQuery Mobile for smooth sliding and effortless deletion of list elements

Refresh the Express Server following the file upload

Is there a way to set a server-side string value using the Dynamic UI Label on page load?

Make sure to invoke the navigate() function within a React.useEffect() hook, rather than calling it during the initial rendering of

Approach for safeguarding unrecorded data in the data management system

Enhance your Rails 5 application with a dynamic live search feature powered by Keyup. Say goodbye to

Guide to creating a ReactJS higher-order component using modern ES6 syntax

The headers in the div section are not properly aligned on the webpage

a service that utilizes $http to communicate with controllers

Issues with Wordpress Ajax request on customized page are causing functionality to fail