What are the steps to create an animation following a transition?

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");
body {
  background-color: black;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.word {
  transition: 0.3s;
  opacity: 1;
}

p,
a {
  color: #fff;
  font-size: 5vw;
  font-family: "Rubik", sans-serif;
  text-transform: uppercase;
  margin: 0;
  text-decoration: none;
  letter-spacing: 2px;
}

.line {
  display: flex;
  justify-content: space-between;
}

.fancy {
  cursor: pointer;
}

#txt:has(.fancy:hover) .word:not(.fancy:hover) {
  opacity: 0.2;
}

.letter {
  display: inline-block;
  transition: all 0.6s ease;
}

.fancy:hover .letter:nth-child(1) {
  transform: translate(-40%, 60%) rotate(8deg);
}

.fancy:hover .letter:nth-child(2) {
  transform: translate(20%, -60%) rotate(0deg);
}

.fancy:hover .letter:nth-child(3) {
  transform: translate(-70%, 80%) rotate(-3deg);
}

.fancy:hover .letter:nth-child(4) {
  transform: translate(-30%, -45%) rotate(3deg);
}

.fancy:hover .letter:nth-child(5) {
  transform: translate(0%, 20%) rotate(7deg);
}

.fancy:hover .letter:nth-child(6) {
  transform: translate(10%, 30%) rotate(2deg);
}

.fancy:hover .letter:nth-child(7) {
  transform: translate(20%, 60%) rotate(3deg);
}

.fancy:hover .letter:nth-child(8) {
  transform: translate(-20%, 30%) rotate(4deg);
}

.fancy:hover .letter:nth-child(9) {
  transform: translate(69%, 0%) rotate(-3deg);
}

.fancy:hover .letter:nth-child(10) {
  transform: translate(12%, 18%) rotate(5deg);
}

.fancy:hover .letter:nth-child(11) {
  transform: translate(15%, -10%) rotate(-5deg);
}

.fancy:hover .letter:nth-child(12) {
  transform: translate(0%, 60%) rotate(9deg);
}
<div id="txt">
  <div class="line">
    <p class="word">A</p>
    <p class="word">Person</p>
  </div>
  <div class="line">
    <p class="word">Youtube</p>
    <p class="word">&</p>
  </div>
  <div class="line">
    <a id="yt-link" href="www.youtube.com" class="word fancy" target="_blank"><span class="letter">C</span><span class="letter">o</span><span class="letter">d</span><span class="letter">e</span><span class="letter">p</span><span class="letter">e</span><span class="letter">n</span><span class="letter">d</span><span class="letter">e</span><span class="letter">n</span><span class="letter">c</span><span class="letter">e</span></a
        >
      </div>
      <div class="line">
        <a
          id="yt-link"
          href="www.youtube.com"
          class="word fancy"
          target="_blank"
          ><span class="letter">@</span><span class="letter">h</span><span class="letter">y</span><span class="letter">p</span><span class="letter">e</span><span class="letter">r</span><span class="letter">p</span><span class="letter">l</span><span class="letter">e</span><span class="letter">x</span><span class="letter">e</span><span class="letter">d</span></a>
  </div>
</div>

To create a unique floating effect for each letter, you can add an animation after the transform transition. However, as a beginner in front-end development, you may encounter some challenges with this.

Adding the animation requires careful handling of the letter positions to maintain their transformed state. If they return to their original position, try adjusting the animation properties and timing.

Keep practicing and experimenting with different techniques to enhance your skills in front-end design!

htmlcssanimationtransformtransition

Answer №1

It seems like you're asking about how to create more advanced animations on hover. One way to achieve this is by using @keyframes instead of relying solely on transition.

Let's take your animation example:

.fancy:hover .letter:nth-child(1) {
   transform: translate(-40%, 60%) rotate(8deg);
}

By utilizing @keyframes, the code would look something like this:

.fancy:hover .letter:nth-child(1) {
   animation: move 2s forwards;
}

@keyframes move {
   0% {
      transform: translate(0, 0) rotate(0deg);
   }
   50%{
      transform: translate(100%, 100%) rotate(8deg);
   }
   100%{
      /* any other desired animations */
   }

If you want the animation state to persist after moving the mouse away, you may need to use JavaScript to add a class to the element.

document.addEventListener("DOMContentLoaded", function () {
    var myElement = document.getElementById("myElement");
    myElement.addEventListener("mouseover", function () {
        myElement.classList.add("hovered");
    });
});

I hope this explanation helps clarify things for you. Have a wonderful day!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An AngularJS directive designed to execute after a text input has been modified

I have integrated a bootstrap calendar datepicker that interacts with and updates an <input type="text"> field. As of now, when I use ng-change="myAngularExpression()", the function gets executed the moment the text box is selected. Is there a way t ...

javascriptangularjshtmlangularjs-directiveangularjs-ng-change

The angular content is not scrolling

I have a basic angular content window that contains an adjustable group of settings values. When the window is collapsed, the fxLayout collapses properly, but I am having difficulty scrolling vertically. I have attempted to use overflow-y and just overflow ...

cssangularangular-material

Tips for making a rounded text box

How can I design a circular textarea where the text conforms to the shape? Here is my attempt, but I'm unsure how to keep the text inside the circle without relying on javascript. ...

htmlcsstextarea

Ways to add padding while ensuring the element remains responsive

Whenever I try to add padding to an element, it ends up losing its responsiveness when the window is resized. I am using Reactjs with React-bootstrap, and I believe the issue lies in the way I am setting the padding on the element. Interestingly, when I re ...

htmlreactjsresponsive-designpaddingreact-bootstrap

What is the method for displaying text and icons as black in a sticky header design?

Having trouble making the menu text and icons in the sticky header black on my website. I've been searching for the correct class in the CSS styles, but haven't been able to find it. I tried using this CSS: .header-wrapper .stuck { color: #000 ...

csscolorsheader

How about combining CSS and jQuery for dynamic image rollovers?

I would appreciate some guidance on this issue. I have an image that, when certain parts of it are hovered over, a word or another picture should pop out. While I feel confident in my ability to achieve the initial effect, I am uncertain about how to make ...

jquerycssimagestyles

Searching for elements in Selenium using Python without a specified name

Looking for some assistance here. I'm trying to use Selenium to access a search field, but it doesn't have a name or ID in the html code. How can I locate and interact with this search field using Selenium? View the HTML code snippet for the sea ...

pythonhtmlseleniumwebdiscord

Exploring the depths of recursive descent parsing and the intricacies of abstract

As I dive into creating a recursive descent parser from scratch for educational purposes, I've encountered some challenges along the way. To illustrate my point, let's take a quick look at a snippet of the CSS3 grammar: simple_selector = type_s ...

cssparsingcss-selectorsabstract-syntax-treerecursive-descent

What is the best way to obtain SAPUI5 Explored designs?

I am working on implementing a sap.ui.Table in my project, similar to the one showcased in the SAPUI5 Explored app. The table I am trying to create should allow for multi-selection of items using checkboxes on the left side. However, after downloading th ...

javascriptcsssapui5

Why won't the jQuery function trigger when I click, but only responds when I move the cursor?

I am currently working on a website that includes a basic CSS style switcher. The function responsible for handling the theme button clicks is shown below: <script> $(function() { $(".light").click(function(){ $("link").attr("href", ...

javascriptjqueryhtmlcssfunction

The Data from Req.Body Doesn't Appear After Adding Form Fields

I've been struggling to find a solution to this issue, but here's the gist of it: I have a button that allows users to add a question and answer pair one at a time by clicking on an "Add Question" button. This is achieved through the append featu ...

javascripthtmlnode.jsexpress

Are you attempting to retrieve the most up-to-date trading price of a stock with Python?

After attempting to extract the LTP of a stock with the code below, I am not getting any value in return. Can you identify the error in the following code: from selenium import webdriver from bs4 import BeautifulSoup driver=webdriver.Chrome("C:&bsol ...

pythonhtmlseleniumbeautifulsoupstock

Tips for universalizing the code of a file upload web form to accommodate various forms with distinct id attributes

Presently, I have a web form dedicated to uploading a single file using jquery. This elegant solution provides users with a progress bar and a message upon the successful completion of the upload process: <form id="uploadFileForm" method="post" action= ...

javascriptjquerycssajax

Interactive table with dynamic data retrieval

I need help displaying data dynamically from a datatable using an API. The API I am working with is located at this URL and I am utilizing the bootstrap4 datatable. You can also find my code on this JSFiddle. Can someone provide guidance or an example on h ...

javascriptjqueryhtmldatatablebootstrap-4

Challenges Faced When Implementing Dropdown Navigation Bars

Whenever the screen width is less than 576px, I notice that the menu icon on my website shifts its position along with the title (FOOD, LLC). How can I resolve this issue? Website: ...

htmlcsstwitter-bootstrapbootstrap-4drop-down-menu

extracting characters in php

Here's the HTML code I'm working with: <p style="color:red;font-size:12px;">This budget-friendly car offers great value, complete with air conditioning making it perfect for couples and small families. There is a ?500 excess, but it can be ...

phphtmlsubstring

Stop browser from downloading attached file

<a href="/scripts/script.pde" target="_blank"></a> My goal is to have the browser show this file as text in a new window. Once clicked, it will be downloaded onto the user's computer. ...

htmltexthyperlinkhref

Smoothly automate horizontal scrolling using JavaScript

My programming journey involved creating a code snippet that automatically scrolls paragraphs horizontally, giving it the appearance of "Breaking News" updates on popular websites. The Javascript script I implemented performs automatic scrolling, but once ...

javascriptcss

The 100% height setting is not functioning as expected

Why is the code below displaying strangely in Firefox and IE7, even though it works fine in Chrome? The height is set to 100%, but it seems to be not exactly that. Any ideas on how to fix this issue? Thank you! <iframe src ="demoFramesetLeftFrame.jsp ...

htmlcss

What is the process for creating a sub-menu for a dropdown menu item in Bootstrap 5?

https://i.sstatic.net/o4FLn.pngthis is my code which i have created this navigation bar with bootstrap and all of its drop downs but i want to add another drop down to the services drop down section inside of webdevelopment but it can't any easy solut ...

javascripthtmljquerycssbootstrap-5