The Syntax of 2D Transformations

I am currently attempting to apply multiple animations on a single element simultaneously. While I have successfully managed to use the translate property to adjust the element's coordinates, I am encountering difficulties in expanding its height and width. It appears that with my current syntax, the animation for height and width is not functioning as expected. Is there an issue with my code structure?

width: 230px;
height: 476px;
-webkit-transform: translate(492px, 0px);
transition: width 2s, height 2s, 0.5s;
-webkit-transition: width 2s, height 2s, 0.5s;

My objective is to smoothly transition the position of the element to the correct location within 0.5 seconds, while also ensuring that it expands to its full height over a span of 2 seconds. Any recommendations or suggestions?

htmlcss

Answer №1

Don't forget to specify the "type" of the effect, like so:

width: 230px;
height: 476px;
-webkit-transform: translate(492px, 0px);
transition: width 2s linear 0.5s, height 2s linear 0.5s;
-webkit-transition: width 2s linear 0.5s, height 2s linear 0.5s;

If you don't set the effect, it may not appear different because there is a default one in place.

I've noticed that you only used webkit transitions and didn't include normal transitions, look here:

$("#box3.box").css({
    "-webkit-transform": "translate(-260px, -" + row1height + "px) scale(1)",
    "-webkit-transition-duration": "2s,2s,2s",
    "-webkit-transition-property": "height, width",
    "transform": "translate(-260px, -" + row1height + "px) scale(1)",
    "transition-duration": "2s,2s,2s",
    "transition-property": "height, width",        
    "height": "250px",
    "width": "250px"
});

Keep in mind I have included both -webkit-transition and transition, as Chrome seems to require the use of transition.

For reference, here is an updated Fiddle showcasing this working in Chrome

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

Is there a way to customize the default settings for a blueprint’s menu item?

https://i.sstatic.net/aNeJY.jpg In my react project, I implemented the Menu using MenuItem from '@blueprintjs/core'. The issue I encountered is that when hovering over a Menu item with children, they open from the right side. Is there a way to m ...

htmlcssreactjsstyled-componentsblueprint

Tips for adding an additional div inside a navigation container, evenly spacing objects, and aligning the search bar to the right

I'm currently working on designing a simple navigation bar but I'm facing difficulties in aligning the elements correctly. See my progress here: https://jsfiddle.net/zigzag/bL1jxfax/ Here are my objectives: 1) Ensure that the navigation bar rea ...

jqueryhtmlcss

What could be causing the spinner (Bootstrap 5.x) to not show up on the screen

I'm having trouble getting a spinner to show up when a user clicks a form submit button. Below is the HTML code to add a <div> for the spinner: <div class="pageloader"> <img src="../images/loader-large.gif" alt ...

cssjquery-uibootstrap-5

Tips for positioning a div to the left once the minimum width has been reached?

<div id="container"> <div id="subsSection"> <div class="leftSection">ss</div> <div class="rightSection">ss</div> </div> </div> (1) My goal is to have the subsection div centered on the ...

htmlcss

The content at the center of the page is shifting to the right side when the browser is resized

I am currently working on creating a random quote generator at the following link: http://codepen.io/Kestvir/pen/peqjZZ. During the html/css aspect of the project, I have run into an issue with the content inside a transparent background. Whenever I resi ...

htmlcsstwitter-bootstrap

Interacting with jQuery UI Droppable by setting acceptance criteria before submitting a form

My goal is to create a draggable item that can be dropped onto a specific zone. The challenge I'm facing is in displaying a form for inputting information and storing it in a database. If the input is successfully stored, the drop action will be succe ...

javascriptjqueryhtmljquery-ui-droppable

Using JavaScript to generate a <style> element and accessing the cssRules

After spending countless hours trying to solve this problem, I'm hoping that my question isn't too foolish. This is a continuation of a previous question about creating a style tag with JavaScript on Stack Overflow. The solutions provided by Tom ...

htmlcssgoogle-chromesafaristylesheet

dismiss data and button for closing notification bar

I am currently using a notification bar at the top of my website, instead of a modal. I am wondering if it is possible to click the X (close-button) and have the notification bar disappear. I attempted to use data-dismiss but it did not work. Also, how can ...

htmlcss

Ways to turn off the dragging animation for cdkDrag?

I am facing an issue with cdkDrag where a small preview of the item being dragged shows up. I want to disable this feature and remove any CSS classes related to the dragging state. Can anyone guide me on how to achieve this? https://i.sstatic.net/nYU07.pn ...

cssangularangular-cdk

Exploring the potential synergy between the compass and blessings

Currently working on a Compass project and facing the issue of my final CSS output being too large, requiring it to be blessed. I am using Codekit to compile SCSS files but unfortunately, the bless option is not available for Compass projects as mentioned ...

cssnode.jscompass-sass

CSS scoped components do not adhere to styles

Here is a basic component example that I'm working with: <template> <div> <b-form-group label="From:" label-align="left" label-for="nested-from"> <date-pick :displayFormat=&quo ...

cssvue.js

I'm puzzled as to why my JavaScript code only functions correctly when I place it after the HTML, despite having a window.onload event handler in place

Just beginning my journey in a CS class and seeking guidance for my lack of basic knowledge. I've noticed that this JS code only works if placed after the HTML, not within the head tag. Shouldn't window.onload handle that? Can someone clarify wha ...

javascripthtml

How can I make a sticky element appear behind a different element?

https://jsfiddle.net/30suam6z/1/ .first { height: 100vh; background-color: red; position: relative; z-index: 2; /* Increase z-index to ensure it covers .test */ } .second { height: 100vh; background-color: yellow; position: relative; z- ...

csssticky

Splitting areas within a liquid vessel using bootstrap 5

My container is structured like this with divisions: <div class="container-fluid"> <div class="row"> <div class="col-3"> sidebar </div> <div class="col-7"> top slider </div> <di ...

htmlcsstwitter-bootstrapbootstrap-5

Obtaining the count of a specific column in Angular 6 by grouping objects based on the same value in an array

In TypeScript, I have an array of objects and I am using a foreach loop. The array contains 2 columns with a progress value of 100, while the rest have values less than 100. My goal is to calculate the count of columns with a progress value of 100, which ...

htmlangulartypescript

Receive notification of alert content when it is displayed

Having an HTML page with the following script: <Script> function Run() { alert("The Content Here"); return true; } </script> <button onclick="Run();">I Want It Now</button> If I were to open this page using firefox or Chrome, and ...

c#javascripthtmlvb.netwinforms

When the value in a required input field is empty, the border is activated and the color is styled

Can you please explain this to me? Try running this code in Firefox: http://jsfiddle.net/eMa8y/24/ Here is the HTML: <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> </head> ...

htmlcssinputborderrequired

Adjust the size of H1, H2... tags based on their own specifications, rather than the surrounding element

I have run into a bit of a conundrum with my code and cannot seem to find the right solution. Here is what I currently have: <div id="bloquetexto4" class="bloquetexto"> <H2><b>TITULO</b></H2> <p>Texto bla bla bla.</p ...

htmlcss

Excessive Empty Area beneath <td>

I'm currently working on creating an e-book and I have encountered a concerning issue. The <figure> and <figcaption> elements are appearing as unknown tags in Sigil. To work around this problem, I decided to use a <table> for display ...

htmlcssepub

<head> Javascript codes are failing to run

Currently utilizing JQuery Mobile, my goal is to navigate between pages with minimal script loading each time a page loads. Essentially, I want to import all the general scripts (such as JQuery.js, jquery_mobile.js, main.js, etc.) ONCE for all pages. In m ...

javascriptjqueryhtmljquery-mobileibm-mobilefirst