Issues with the CSS animation not properly scaling

I'm currently working on an animation using CSS keyframes. Here is what I have:

@keyframes experience {
0% {
-webkit-transform: scale(0,0); 
        transform: scale(0,0);
-webkit-transform: translateY(40px);
        transform: translateY(40px);
opacity: 1;
}
60% {
-webkit-transform: scale(1,1); 
        transform: scale(1,1);
-webkit-transform: translateY(40px);
        transform: translateY(40px);
opacity: 1;
}
100% {
-webkit-transform: translateY(0px);
        transform: translateY(0px);
opacity: 1;
}
}

Everything seems to be working fine except for the Scale property, as it scales in one go rather than animating smoothly. I am also using the Jquery waypoints plugin and the div has a specific class applied to it.

.workitem {
    position: relative;
    width: 1000px;
    height: 200px;
    background-color: #333;
    margin: 0 auto; 
    opacity: 0;
    -webkit-transform: scale(0);
        transform: scale(0);
}

When the waypoint triggers, I add another class which utilizes the above animation.

.experience {
     -webkit-transform: scale(0);
             transform: scale(0);
     -webkit-animation: experience 2s ease-in forwards ;
             animation: experience 2s ease-in forwards ;
}

This class applies the specified animation mentioned earlier.

cssanimationscale

Answer №1

The reason for this behavior is due to the fact that you are essentially overwriting your scale transform property. Consider the following CSS:

    transform: scale(0,0);
    transform: translateY(40px);

It can be compared to this scenario:

    color: red;
    color: blue;

In the above example, the color property of an element would be expected to be blue since the second style rule overrides the initial one specifying red.

A similar concept applies to the transform property. Despite using different transformation types, they all fall under the same transform property.

The sudden change occurs because initially the element is set to a scale(0,0), but during the animation, it only translates without scaling, resulting in an immediate return to its original size.

To avoid this issue, you can consolidate your styles as follows:

    transform: scale(0,0) translateY(40px);

Don't forget to include appropriate vendor prefixes as needed!

Answer №2

Try this:

@-moz-keyframes

Mozilla Firefox also uses a prefix for keyframes. Here is a complete example to illustrate the usage of prefixes:

@keyframes anim{
  to{transform:rotate(30deg);}
}
@-moz-keyframes anim{
  to{-moz-transform:rotate(30deg);}
}
#element{
  animation:anim;
  -moz-animation:anim;
}

Note: The use of transform was intentional to highlight the necessity of prefixes in specific versions of keyframes only.

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

Expanding divs in CSS for multiline versus single line text content

I am attempting to display text within a bordered div that is positioned absolutely inside another div. Option 1 using width:auto; - view fiddle: https://jsfiddle.net/c21kt6r4/ The issue here is that the box on the left side expands excessively. Option 2 ...

htmlcsswidthcss-position

Creating a dynamic linear gradient background color using Angular 2 binding

Using static values works perfectly <div style="background: linear-gradient(to right, #0000FF 0%, #0000FF 50%, #FFA500 50%, #FFA500 100%);"></div> in my TypeScript file. this.blueColor = '#0000FF'; this.orangColor = '#FFA500&a ...

htmlcssangular

A tool that enhances the visibility and readability of web languages such as HTML, PHP, and CSS

Looking to organize my own code examples, I need a way to display my code with syntax highlighting. Similar to how Symfony framework showcases it on their website: http://prntscr.com/bqrmzk. I'm wondering if there is a JavaScript framework that can a ...

javascriptphphtmlcssgenerator

What are some ways to make source code more visually appealing on an HTML/JSP page as it is being

I've recently created a webpage with some Java source code, neatly organized within blocks. However, I'm looking to enhance its appearance so it truly looks like Java code. Take a look at my page's code here for reference: Are there any onl ...

javascriptjqueryhtmlcsssyntax-highlighting

jquery is in motion while svg paths are at a standstill, waiting to

i have been attempting to incorporate a css-animated svg into my project. initially, the animation would start automatically, which was undesirable. after some research, i discovered that by declaring it as paused and then triggering it using jQuery with $ ...

javascriptjquerycsssvgpath

How to center align an HTML page on an iPhone device

I am currently testing a HTML5 webpage on my iPhone, utilizing CSS3 as well. The page appears centered in all browsers except for the iPhone, where it is left aligned. I have attempted to use the following viewport meta tag: <meta name="viewport" conte ...

iphonehtmlcss

A lateral sliding motion

Here is the HTML code I am working with: <div class="menuTabs"> <div class="mtabArrowLeft">Left</div> <input class="menutabBTN" name="" type="button" value="a" /> <input class="menutabBTN" name="" type="b ...

javascriptjquerycss

Issue with CSS for Pagination and Content Display

When I print an HTML page, I want to include custom text in the header of all printed pages. @page { margin-top:5mm; margin-bottom: 25mm; margin-left: 30mm; margin-right: 30mm; @top-right{ content: "Page title"; /* Page title ...

htmlcsscss-paged-media

Can anyone suggest a method to customize the appearance of select options in Vue.js?

https://i.sstatic.net/qNov8.png Is there a way to customize the color and font of select options? I'm referencing this link for an example: . I attempted CSS modifications but they don't seem to be taking effect. ...

cssformsvue.jsbootstrap-vue

Using JavaScript, create a set of buttons within a div element and implement

$(document).ready(function() { $('#b1').click(function() { $('#uch').toggle("slow"); }); $('#b2').click(function() { $('#uch2').toggle("slow"); }) }) Although I'm not a program ...

javascriptjqueryhtmlcssfunction

Tips for setting up the image as the header background in HTML5 and CSS3

I am currently designing a website. I'm wondering if there is a way to create a div with a curved bottom using HTML5, CSS3 and JavaScript. It should resemble the design of the curved header bottom ...

javascriptjqueryhtmlcss

Creating a Jquery slider animation: step-by-step guide

I tried implementing a code example in jQuery, but I am struggling with achieving smooth transitions in my slides. The changes are happening too abruptly for my taste. How can I create animations that occur during the transition, rather than after it? f ...

jquerycss

Animate all shapes in SVG to rotate around a central pivot point

I am looking for a simple way to make an SVG graphic rotate around its center point. The rotation doesn't need to be smooth, just a 90 degree turn and back every second. Here is the SVG code: <?xml version="1.0" encoding="utf-8"?> <svg vers ...

cssanimationsvgrotation

Search Result Causing Navbar to Break in Bootstrap Framework

While working on implementing the search functionality with AJAX and PHP, I encountered an issue where displaying the search results breaks the navbar layout. https://i.sstatic.net/FctpA.png this is the navigation bar code <nav class="navbar ...

phphtmlcssajaxtwitter-bootstrap

Using jQuery to delay hiding for 2 seconds

Hey there! I'm facing an issue with my code. The function is supposed to make #aboutPopOut slide to the left, and then after a 2-second delay, fade out the fadescreen by hiding it. The sliding part works fine, but the waiting and hiding do not seem to ...

javascriptjqueryhtmlcssweb

Removing Inline Styles Using jQuery Scroll Event

Whenever I reach the scroll position of 1400 and then scroll back to the top, my chat elements (chat1, chat2, chat3, chat4) receive an "empty" inline style but only for a duration of 1 second. After that, the fadeIn effect occurs again every time I scroll ...

jquerycss

JavaScript: Activate the element with the first class of its children

This code is a visual representation of what I'm trying to accomplish... <style> .red{background:red} .blue{background:blue} </style> <div id=test> <button>1</button> <button>2</button> </div> ...

javascripthtmlcssgetelementbyidclassname

Create a div element that initially aligns to the left, expands to the full width of the window, and then shrinks back

Hi there! I am currently diving into the world of javascript and jQuery, with a specific goal in mind. I want to create functionality where a div expands to the width of the window when clicked, then shrinks back down to its original size but switches alig ...

javascriptjqueryhtmlcss

Ways to adjust the border color when error helper text is displayed on a TextField

I am currently working with React Material UI's TextField element. What I aim to achieve is when the submit button is pressed, the helpertext displayed should be "Please enter the password." It should look like this: https://i.sstatic.net/Nu0ua.png ...

javascripthtmlcssreactjssass

Can a specific element be chosen based on its background color?

Is it possible to change the background color of a child element within a div that has a specific background color using CSS? See my explanation below. For example: .container[background-color=some color] .content { background-color: some other color ...

javascripthtmlcss