What is the best way to establish the starting property state for CSS Animation?

I'm looking to create an animation that involves the following steps:

  1. Initial: elementA starts with opacity set at 0;
  2. When hovering over containerA, which contains elementA:
    • elementA transitions from position (-5px, 5px) to (0px, 0px);
    • elementA changes opacity from 0 to 1;
    • animation duration is 0.5s;
  3. Upon exiting the hover state of containerA:
    • elementA changes opacity from 1 to 0;
    • elementA maintains its position without moving;
    • animation duration remains at 0.5s;

I was able to achieve this effect by adding or removing CSS classes, as seen here (https://jsbin.com/buqexadiru/edit?html,css,js,console,output)

My query now is whether it's possible to replicate this effect using only pure CSS, without the need for additional class manipulations. Can this be done?

javascriptcssanimation

Answer №1

When the user hovers over the container, apply a fade-in effect to the opacity using transition and a transformation effect using animation.

.container {
  margin: 1em;
  border: 2px solid blue;
  background: lightblue;
  width: 50vh;
  aspect-ratio: 1;
}

.item {
  width: 20vh;
  aspect-ratio: 1;
  background: green;
  opacity: 0;
  transform: translate(0%, 0%);
  transition: opacity .5s;
}

.container:hover .item {
  opacity: 1;
  animation-name: appear;
  animation-duration: .5s;
  animation-fill-mode: forwards;
}

@keyframes appear {
  0% {
    transform: translate(-50%, -50%);
  }
  100% {
    transform: translate(0%, 0%);
  }
}
<div class="container">
  <div class="item"></div>
</div>

Answer №2

Explore various animation effects

.container {
  margin: 1em;
  border: 2px solid blue;
  background: lightblue;
  width: 50vh;
  aspect-ratio: 1;
}

.item {
  width: 20vh;
  aspect-ratio: 1;
  background: green;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity .5s,transform 0s .5s; /* Wait for opacity to finish before changing transform */
}

.container:hover .item {
  opacity: 1;
  transform: translate(0%, 0%);
  transition: .5s; /* Transition both properties on hover */
}
<div class="container">
  <div class="item"></div>
</div>

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

Manipulating classes within ng-class in AngularChanging classes in ng-class dynamically

Featuring multiple elements with an ng-class that behaves similarly to a ternary operator: ng-class="$ctrl.something ? 'fa-minus' : 'fa-plus'" To access these elements, we can compile all the ones with fa-minus and store them in a lis ...

javascriptjquerycssangularjsjquery-selectors

Generating a dynamic drop-down menu in Django using database values

My goal is to create a Django app that includes dynamic drop-down lists for vehicle makes and models. When selecting a specific make, the models list should update to display only the models that fall under that make. I believe this can be achieved using j ...

javascriptdjangoformslistdynamic-data

ion-list with borders of different colors for each ion-avatar

I have a list of ion items, each displaying a round ion-avatar image with a colored border. Currently, I can only set one fixed color for all items. However, I would like each item to have a different color based on the value of listItem.color. Here is th ...

htmlcssangulartypescriptionic2

React JS - Sending props from Dev and Build to App component

Looking to include static assets and props in my App, specifically having image assets set with a base64 string in the build process. Want to ensure these assets are accessible to the App's props before development and build stages, similar to the fun ...

javascriptnode.jsreactjsbuild

Extend GridView cell for file preview and download

Within my gridview, there is a column labeled "File Name" which includes the names of various files. I am looking for a way to click on a specific file name and be able to view its content as well as save or download the file. I am open to all suggestions ...

c#javascriptasp.netajaxgridview

Is it possible to showcase the data from three or more PHP files on a single webpage?

I currently have three PHP files: pie.php, bar.php, and line.php. When each file is run individually, it displays a webpage with a pie chart, bar chart, or line graph respectively. However, running all three files opens up separate webpages for each graph. ...

phpjavascript

Concealing elements with HTML, CSS, and JavaScript by setting the display

Issue arose when I set my id="Gabel" display to none, resulting in distorted formatting. Any suggestions for correcting this? Desired outcome is to show display id="Gabel" upon clicking the image on the main page. Here are relevant co ...

javascripthtmlcssbootstrap-4

I am looking to create a unique JavaScript variable within my GTM container that will automatically return a value of true when the user approves sharing

Is there a way to trigger a tag when the user shares their location with the browser? I attempted using the following code within a custom JavaScript variable in my GTM Container, but it didn't seem to work. navigator.permissions && navigator ...

javascriptgoogle-tag-manager

Scope of the variable not defined within the ajax callback

function verifyDeleteFacilitator(facilitatorId, handleData) { var request = $.ajax({ type: 'GET', url: urls.verifydeletefacilitator, data:{facilitatorId: facilitatorId} }).done(function (response) { return handleData(response); }) ...

javascriptajax

The alignment of the div is not correct when using css, and there seems to be

... ...

javascriptjqueryhtmlcss

Obtaining information from AngularJS callback function in loopback: A comprehensive guide

I am trying to figure out how to retrieve the "good" array from an angular function. Here is the function I have in my Angular code: app.run(function($rootScope,Communications,$http,$filter) { $rootScope.getCommunication = function(object_type ...

javascriptangularjsloopbackjs

What obstacles must be overcome when developing a CSS framework?

Currently, I am delving into the realm of popular CSS frameworks such as Bootstrap and Foundation. While studying them, I have identified aspects that I believe could be enhanced and customized to suit my own projects or potentially for free distribution i ...

csscss-frameworks

The integration of ASPNetSpell Spell Checker with CKEditor 3 is not functioning properly on Chrome browsers

In my efforts to incorporate ASPNetSpell's spell checker () into CKEditor (), I have encountered some unexpected behavior across different browsers - IE 8+, FireFox 12, and Chrome 18.0.1025.152m. The issue seems to be that in Chrome, ASPNetSpell is u ...

javascriptasp.netasp.net-mvc-3ckeditorspell-checking

Issue with passing data to Vue modal component

I am encountering an issue while attempting to pass data to the UserModal. Despite confirming that the value of the user_clicked field is assigned when the openuserdialog method runs (verified through console check), I am unable to pass it as an argument t ...

javascriptvue.jsvuetify.js

Guide to centering the navigation bar within a container using Bootstrap 4

I'm looking to center the navbar on my webpage. How can I style it so that it appears in the middle of the page? Currently, it's aligned with the left side of the page. section class="navbarSection"> <div class="contain ...

htmlcssbootstrap-4

What is the best way to refresh a navigation bar after making an API request, such as when using Google Sign-In?

Struggling to grasp the hook concept in this particular scenario: The flow goes like this - the user logs in with Google, which updates the session state. Consequently, the visitorType state transitions from 'viewer' to 'buyside'... A ...

javascriptreactjsnext.js

I'm having trouble with the routing of a Node.js REST API built with Express and Mongoose

I am currently in the process of constructing a RESTful webservice by following a tutorial that can be found at: However, I have encountered an issue where it is returning a CANNOT GET/ reports error. Despite my efforts to troubleshoot and rectify the pro ...

javascriptnode.jsrestapiexpress

I could not retrieve data from the Promise {} object

Currently, I am in the midst of developing a discord bot using discord.js. When attempting to retrieve the target user, I utilize the following code: let target = message.guild.members.fetch(id). This method yields either Promise { <pending> } if the ...

javascriptdiscord.js

Adding quotes is optional when using the append function

We are retrieving product options from the displayed html using variables PRODUCT_CUSTOM_1_ and PRODUCT_NAME_. Some products have quotations like " and '. However, when we post these strings elsewhere, they get cut off at the ". We need to either remo ...

javascriptjqueryhtmlquotations

Unlock the App Store instead of iTunes Store using react-native-version-check

I am currently using react-native-version-check to trigger the opening of the app store or play store if an update is available. However, on iOS it redirects to the iTunes store instead of the desired AppStore location. Below is the code in question: ...

javascriptiosreact-nativeapp-store