Can you animate just one type of css transform using transitions?
My css looks like this:
cell{
transform: scale(2) translate(100px, 200px);
transition: All 0.25s;
}
Now I only want to animate the scale property. I could use position:absolute with left/right properties, but translate() performs better in terms of performance. I also want to avoid adding extra html elements.
Check out the Fiddle here: http://jsfiddle.net/6UE28/2/
Absolutely not! It is not possible to exclusively use the transition property for specific values of the transform attribute such as scale(2).
One potential remedy could involve incorporating additional HTML elements, like so: (regrettably, this necessitates extra HTML markup)
<div class="scale">
<div class="translate">
Hello Universe
</div>
</div>
div.scale:hover {
transform: scale(2);
transition: transform 0.25s;
}
div.scale:hover div.translate {
transform: translate(100px,200px);
}
Absolutely! The trick is to divide it into two selectors, one with transition: none. Then, initiate a CSS reflow in between to ensure that the change is applied correctly (otherwise it will be treated as a single change and transitioned together).
var element = document.getElementById('element');
element.addEventListener('click', function() {
element.classList.add('enlarged');
element.offsetHeight; /* CSS reflow */
element.classList.add('moved');
});#element { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#element.enlarged { transform: scale(2); transition: none; }
#element.moved { transform: scale(2) translate(100px); transition: transform 3s; }<div id="element"></div>A new feature is now available where translate, scale, and rotate have been relocated to individual CSS properties. This change allows for more flexibility and customization in styling elements! (Check out MDN for more information: translate, scale, rotate)
Now you can easily implement these transformations with separate CSS properties:
div{
scale: 1;
translate: 0;
transition: scale 0.4s;
}
div.clicked{
scale: 2;
translate: 100px 200px;
}
Take a look at this live example: http://jsfiddle.net/bjkdthr5/1/ (note that only the scale property will animate)
Absolutely, go ahead and give it a try. To achieve this effect, make sure to utilize only one transform on the element.
One common misconception is that you apply the transform directly to the element itself. In reality, you apply it to the change-state (via a pseudo class like :hover or another class with the desired styles for the changed state). Take a look at @David's comment on your question for further clarification. Only alter properties that need changing based on the modified state in order to animate them.
To sum up, modify them selectively according to the altered state.
Solution 1: Utilizing Javascript (based on the fiddle link provided in your query)
Check out the demo here: http://jsfiddle.net/abhitalks/6UE28/4/
Relevant CSS Code:
div{
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
/* Avoid specifying transforms here */
}
Relevant jQuery Code:
$('...').click(function(){
$("#trgt").css({
"-webkit-transform": "scale(0.5)"
});
});
// OR
$('...').click(function(){
$("#trgt").css({
"-webkit-transform": "translate(100px, 100px)"
});
});
// OR
$('...').click(function(){
$("#trgt").css({
"-webkit-transform": "scale(0.5) translate(100px, 100px)"
});
});
Solution 2: Relying solely on CSS
Another demonstration can be found here: http://jsfiddle.net/abhitalks/4pPSw/1/
Relevant CSS Code:
div{
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
/* Avoid specifying transforms here */
}
div:hover {
-webkit-transform: scale(0.5);
}
/* OR */
div:hover {
-webkit-transform: translate(100px, 100px);
}
/* OR */
div:hover {
-webkit-transform: scale(0.5) translate(100px, 100px);
}
Instead of triggering a forced reflow, you can achieve the same result using setTimeout.
var box = document.getElementById('box');
box.addEventListener('click', function() {
box.classList.add('enlarged');
setTimeout(function() {box.classList.add('moved');})
});#box { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#box.enlarged { transform: scale(2); transition: none; }
#box.moved { transform: scale(2) translate(100px); transition: transform 3s; }<div id="box"></div>I have a DIV class containing around 10 elements within a container. I am looking to implement a feature where these elements are hidden and shown one by one every 15 seconds using jQuery with a smooth fadeOut() effect. Your assistance in achieving this wo ...
I've recently put together a basic form snippet: class PostForm(FlaskForm): # for publishing a new blog post title = StringField("Title", validators=[DataRequired()]) submit = SubmitField('Post') The structure of my HT ...
Despite adding margin, my h3 tag and p tag in a div keep overlapping. .title { margin: 0 0 26px; width: 335px; height: 28px; font-size: 24px; font-stretch: normal; font-style: normal; line-height: 36px; letter-spacing: 0; text-align: c ...
I am looking to implement scrolling for just the "chat-messages" div within the "chat-bar" div on my site. I want only this specific section to be scrollable, while the rest of the site remains stationary. Currently, I have to scroll through the entire pag ...
I have a variety of different elements that are structured similarly to the following.. <div id="hi"> <div class="head"> </div> <div class="footer"> </div> </div> ..however, some of these elements do no ...
Recently, I created a small practice website and encountered an issue that is quite frustrating. Here's the div structure I used: <div class="work-process"> <div class="container" align="center"> <div class="col- ...
After following a tutorial and successfully completing the project, I encountered a JavaScript error saying "Uncaught TypeError: totype[totypeIndex] is undefined". When I tried to log the type of totype[totypeIndex], it initially showed as String, but late ...
I'm having an issue where the background color changes when I click a button, but reverts back almost immediately to its original color. How can I ensure that the new color stays permanently? Here is a simple JavaScript function you can use: functio ...
Something seems to be off with this topic. I am attempting to hover over a link and change the background image of a div element. The goal is to always display a different picture based on what is set in the data-rhomboid-img attribute. <div id="img- ...
$('#thankYouMessage').css({"height": textHeight, "margin-top:": "-52px", "padding-left": "19px"}); The CSS property 'padding-left:' will be applied as expected, but the negative margin will not take effect. The 'margin-top:' ...
Is there a way to center the dialog box vertically at the current scroll position of the window when any of the "show dialog" buttons are clicked? For instance, if I click on location 3, I want the dialog box to be centered vertically within the current v ...
Transform the boxes into concentric circles (circles within each other that share the same center). The outer circle should be black with a size of 300px and the inner circle should be white with a size of 200px. html: <div id="p10"> <div id ...
I am struggling to implement two CSS events when transitioning between sections on a fullPage.js application. To see my current progress, you can view the following fiddle: http://jsfiddle.net/pingo_/67oe1jvn/2/ My objectives are as follows: To modify t ...
In the mobile version of a website, there is a fixed navigation bar at the top. The positioning of this navbar is achieved using position:absolute: .navbar-fixed-top{position:absolute;right:0;left:0;z-index:1000; The goal is to make the navbar invisible ...
I've configured a Bootstrap dropdown in my site's mini cart that includes a lightbox effect to grey out the background content when the dropdown is activated. Here's the code snippet: $(".dropdown").on('show.bs.dropdown hide.bs.dropdow ...
Trying to create a dynamic newspaper layout using ASP.NET C# web form. Struggling to set the page layout size inside a slider and display specific news content on a new page when clicking on an area of the newspaper using Repeater or another suitable contr ...
While updating the CSS on my blog, I ran into an issue where the text in my posts is not extending all the way to the end. To see what I'm experiencing, check out this image- I really need the text to align properly and reach the full width of the p ...
I am facing a challenge in grasping the interaction between flexbox containers and other elements on a webpage. When I have only a flexbox on my page, everything works smoothly. However, when I introduce other elements, things start acting strangely. It se ...
I am in the process of creating a gallery that will display a div with images when a button is clicked. The issue I am facing is that when I have two buttons, only the last images are clickable. It's a bit difficult to explain, but you can see it in ...
Is there a way to dynamically adjust the height of the footer based on the content length inside the body? I've been exploring solutions like setting the position of the footer as "fixed," but it seems to stay at the bottom of the screen, which is no ...