Bring to life in both directions

I want to incorporate Animista animations to make a button scale in from the left when hovering over a div block, and then scale out to the left when the mouse moves out of the div block.

Check out my code snippet below:

http://jsfiddle.net/30sfzy6n/3/.

<div class="element">
 <button>
  +
 </button>
</div>

.element {
  background: red;
  height: 20px;
}

.element:hover button {
  display: flex;
    -webkit-animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.element button {
  display: none;
    -webkit-animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
* Generated by Animista on 2018-8-30 14:38:13
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@-webkit-keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}
@-webkit-keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}

The use of `display: none` and `display: flex` is essential for me.

htmlcss

Answer №1

A better approach for animating the scaling out effect is to avoid using display: none. This will prevent the button from being instantly hidden without any animation.

Instead, consider utilizing JavaScript to set display: none after a designated timeout period. This will maintain the animation while providing the desired outcome.

Answer №2

Avoid using the display:none property as it does not support animation properties.

<div class="element">
  <button>
  +
 </button>
</div>

.element {
  background: red;
  height: 20px;
}

.element:hover button {
  display: flex;
    -webkit-animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-in-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

.element button {
    -webkit-animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: scale-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
* Generated by Animista on 2018-8-30 14:38:13
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
@-webkit-keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-in-left{0%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}
@-webkit-keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}@keyframes scale-out-left{0%{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}100%{-webkit-transform:scale(0);transform:scale(0);-webkit-transform-origin:0 50%;transform-origin:0 50%;opacity:1}}

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

What is the best way to search for a CSS selector that includes an attribute beginning with the symbol '@'?

Whenever I want to target an element with a click event, I usually use the following jQuery selector: $('div[@click="login()"]') <div @click="login()"> Login </div> However, when I tried this approach, it resulted ...

javascripthtmlcssgoogle-chromeconsole.log

Applying CSS dynamically to a mat-cell in Angular 6

In my material table, I need to apply specific CSS classes based on the content of the cell. These are the CSS classes that I am using .status-code{ flex: 0 0 10% !important; width: 10% !important; } .status-code-success{ flex: 0 0 10% !impo ...

cssangularangular-materialmaterial-design

Exploring ways to create a dynamic background image that allows the rest of the page to float over seamlessly

Currently working on a responsive website and almost done with the build. However, I came across a site where an image appears to be floating behind the rest of the webpage content. Tried searching for a solution using w3.css without any luck. Any sugge ...

htmlcssresponsive-design

Utilize the scrollIntoView method within a jQuery function

My current setup involves using JQuery's show and hide function. Essentially, when an image is clicked, it triggers the display of an information log. The issue I am facing is that this log opens at the top of the page, whereas I would like it to scro ...

javascriptjqueryhtmlcss

The IIS URL rewrite is causing issues with the rewriting of CSS and JS files

Struggling with my URL rewrites - every time I set up a rewrite for a page, it ends up affecting the CSS and JS files linked within the webpage, resulting in them not displaying properly. In an attempt to fix this issue, I tried using fully qualified path ...

javascriptcssasp.netiisurl-rewriting

List style image does not serve its intended purpose

I attempted to personalize my webpage by adding an image to a list, but I couldn't get the list-style image to work. You can view the page at Below is the code I used: CSS /* Fleet List */ ul#flotta li { list-style-image:url("http://ctp.serviziew ...

csshtmlimageliststyles

Foundation 5.2.2: Creating a Dropdown Menu

Would it be possible to achieve this effect using Foundation: https://i.stack.imgur.com/UyYqK.png ? I am interested in implementing 2 COLUMNS in the TopBar Menu: foundation.zurb.com/docs/components/topbar.html I came across a MegaMenu (codepen.io/winghou ...

htmlcssnavigationzurb-foundationnavbar

What is the best way to save JavaScript array information in a database?

Currently working on developing an ecommerce website. My goal is to have two select tags, where the options in the second tag are dynamically populated based on the selection made in the first tag. For example, if "Electronics" is chosen in the first tag f ...

javascriptphphtmlsqlarrays

An HTML form featuring various submit buttons for accomplishing different tasks

After searching extensively, I have come across solutions that are similar but not quite right for my specific situation. Here's what currently works for me: <script type="text/javascript"> function performTask1(a, b) { window.open('intern ...

javascripthtmlforms

Crafting an iframe that dynamically adjusts with Tailwind CSS

I'm having trouble ensuring that an iframe fits properly within a div while using tailwind CSS. I'm struggling to make the iframe responsive, no matter what class I try. Can anyone suggest a class that would help me achieve responsiveness for an ...

htmlcssiframe

Problem with animated scrolling in Jquery

Currently, I am working on a function that aims to smoothly scroll the web to a specific div each time a user scrolls "into" a container div. You can get a better idea of what I mean by looking at my JSFiddle. Everything works perfectly when the user scro ...

javascriptjqueryhtmlcss

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed. ...

htmlcsstwitter-bootstrapgrid-layout

In Angular 16, allow only the row that corresponds to the clicked EDIT button to remain enabled, while disabling

Exploring Angular and seeking guidance on a specific task. I currently have a table structured like this: https://i.stack.imgur.com/0u5GX.png This code is used to populate the table: <tbody> <tr *ngFor="let cus of customers;" [ngClass ...

htmlangulartypescript

The clearfix feature fails to function properly with overflow:auto

I could really use some help with my CSS skills: Here is the HTML code I am working with: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Cluster Test</title> <link rel="stylesheet" href= ...

htmlcss

Iterating through an SVG path multiple times

If I have the arrow below and I want to place it at various locations within the svg: <svg width="400" height="400"> <path transform="translate(150,100)" fill="black" d="M 0.5,0.5 l-100,0 -25,20 25,20 100,0 z" /> <path transform="translate( ...

javascriptcsssvg

How can I set a checkbox as mandatory using ng-messages and Ionic framework?

I am currently developing a form for my application using Cordova CLI 8.0, Ionic 1.3.5, and AngularJS 1.5. My goal is to set a checkbox as required within the form. Here's the approach I have taken so far: <ion-checkbox name="entry.exportcode" n ...

angularjshtmlformsionic-framework

Converting Rich Text Format (RTF) Data to HTML: A Step-by

I have information stored in RTF Format within an MS Access Database. The format is as follows: {\rtf1\ansi\deff0\deftab720{\fonttbl{\f0\fswiss MS Sans Serif;}{\f1\froman\fcharset2 Symbol;}{\f2\f ...

asp.nethtmlrtf

Having Trouble With Your Font Display?

I am confident that my code is correct. Here's a snippet from what I've done: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="homepage.css"/> </head> <body> <div id="menu"> &l ...

cssfontsfont-face

Challenges arising when transferring data from Django to HTML

I am trying to calculate the sum of elements in lista[] which consists of decimal numbers, but I keep getting this error message: lista[] is composed of decimal numbers ValueError at / argument must be a sequence of length 3 This is my code : views.py ...

htmldjangodjango-views

Tips for transforming JSON data from a specified URL, which requires authorization, into an HTML table or list using PHP

I am attempting to retrieve JSON data from this source: They have provided a 'how to' guide here: I have successfully connected with Authorization and received the raw JSON, but I am unable to format it into a table. This is the code I have wr ...

phphtmljsonxml