Targeting elements using CSS3 animations

http://codepen.io/janesmith/pen/dqweasd

Need some help with this issue. I am trying to have the div start with a scale of 0 and then scale in when clicked. However, my attempt was unsuccessful.

CSS

/* Styling for Content Area */
.content div {
    width: 50%;
    margin: 2em auto;
    padding: 1em;
    background: #333;
    border: 1em solid #555;
    color: #fff;
    transform: scale(0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
}

/* Hide unselected targets */
.content div:not(:target) {
    display: none;
}
/* Display selected target */
:target {
    display: inherit;
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

HTML

<article id="container">
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="#services">Services</a></li>
    </ul>

    <div class="content">
        <div id="about">
            Additional content here.
        </div>
        <div id="contact">
            More content here.
        </div>
        <div id="services">
            Even more content here.
        </div>
    </div>
</article>

Answer №1

You seem to be facing two issues here. Firstly, the specificity of the .content div selector is higher than that of the :target selector, causing the rules in :target to be overridden by those in .content div. One way to resolve this is by using a selector like .content div:target.

The second issue is related to transitions breaking when the display state is changed. One workaround for this is to utilize keyframe animations, as shown in the following example:

http://codepen.io/anon/pen/dxHkf

If you notice any flashing, please note that it only occurs on CodePen and should work fine when used independently.

.content div:target {
    -webkit-animation: scale 300ms ease-out forwards;
    -moz-animation: scale 300ms ease-out forwards;
    animation: scale 300ms ease-out forwards;
}

@-webkit-keyframes scale {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@-moz-keyframes scale {
    from {
        -moz-transform: scale(0);
    }
    to {
        -moz-transform: scale(1);
    }
}
@keyframes scale {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

Additionally, consider using a different technique, such as utilizing clip instead of display to hide elements. You can refer to the following example:

http://codepen.io/anon/pen/eofrz

.content div:not(:target) {
    position: absolute;
    clip: rect(0 0 0 0);
}

.content div:target {
    transform: scale(1);
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
}

Lastly, if you encounter an issue where browsers target the center of the scaled element, you can use transform-origin: 50% 0 to adjust the transformation origin to the desired point.

.content div {
    ...
    -webkit-origin: 50% 0;
    -moz-origin: 50% 0;
    -o-origin: 50% 0%;
    transform-origin: 50% 0;
}

By implementing these workarounds, you should be able to resolve the issues you are experiencing with your CSS transitions effectively.

Answer №2

If your query is clear to me, you will need to apply the scale(0) to all elements except for :target, and then smoothly transition to scale(1) when :target is selected as shown below.

As mentioned by ndm in their response, changing the display state can disrupt transitions. Therefore, changing from display: none to display: block will prevent the transition effects from taking place.

To work around this issue, you can adjust your code as follows. It utilizes the translate property to shift the contents out of the display area. (Please note: This method will cause the slide-in effect to occur from the left side, as I did not find a better alternative).

.content div {
    width: 50%;
    margin: 2em auto;
    padding: 1em;
    background: #333;
    border: 1em solid #555;
    color: #fff;
    transition: all 300ms ease-in-out;
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
}
/* hide unselected targets */
 .content div:not(:target) {
    height: 0;
    overflow: hidden;
    position: absolute;
    transform: translate(-100%) scale(0);
    -webkit-transform: translate(-100%) scale(0);
    -moz-transform: translate(-100%) scale(0);
    -o-transform: translate(-100%) scale(0);
    -ms-transform: translate(-100%) scale(0);
}
/* display selected target */
 :target {
    transform: translate(0%) scale(1);
    -webkit-transform: translate(0%) scale(1);
    -moz-transform: translate(0%) scale(1);
    -o-transform: translate(0%) scale(1);
    -ms-transform: translate(0%) scale(1);
}

CodePen Link

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

Adding a class to radio buttons with a specific label using jQuery

As of now, I am utilizing jQuery to apply or remove a class when a radio button is selected. However, the issue arises when it checks all radio buttons, resulting in CSS being added to only one radio button. My HTML layout consists of rows containing eith ...

When an element with a border attribute is hovered over, it shifts position

When I hover over an li-element, I want to apply borders at the top and bottom. Here's the code snippet: #overview li:hover { background: rgb(31, 31, 31); border-top: 1px solid white; border-bottom: 1px solid white; } Check out this JSFi ...

Experience the illusion of three-dimensional depth with SVG light and shadow effects

I am trying to achieve a 3D effect on an SVG by adding a light source at the top and left border, and a shadow on the bottom and right border. Here is an example: #div1 { background: #ddd; } #div1, #div2, #div3 { width: 100px; height: 100px; po ...

Discover the magic of TransformToggle and slideToggle in Javascript, HTML, and CSS

Working on a website coding project and ran into an issue. Trying to utilize an img as a link to slideToggle content. It's working, but I'd like the img to rotate 90deg on the first click and -90deg on the second one. Any solutions are greatly ap ...

Detecting a click event within a hidden div located behind another visible div

I am facing an issue with triggering ng-click in a div that is covered by another div. The current scenario I have is as follows: https://i.sstatic.net/SfM5y.jpg Basically, I need to activate ng-click on the yellow circle when it is clicked. However, the ...

In Google Chrome, the :after element on the left is cleared, while other browsers do not

In an effort to create a button using background images in the :before and :after pseudo-selectors for cross-browser compatibility, an issue arose where only Chrome did not display it correctly (Safari results were unknown). HTML: <div class="btn-cont ...

Trimming the div tag from the bottom of the webpage

Currently utilizing bootstrap 4.0.0-beta.2 and encountering a CSS issue. In the specific layouthttps://i.sstatic.net/7WOGu.png Here is the HTML: <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" re ...

W3C validation issue: "Failure to immediately follow a start-tag with a null end-tag" and similar errors

Encountering validation errors with the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <hea ...

Adapting the colors of various elements throughout the entire webpage

My goal is to incorporate color-switch buttons on my webpage. When these buttons are clicked, I want the existing colors to change to different shades. However, my challenge lies in the fact that these colors are used for various elements such as backgro ...

Flexbox: Distribute remaining space evenly while allowing content to wrap

Is there a method to instruct flexbox items to occupy the available space while wrapping as soon as they become smaller than their content? However, some items have a fixed width percentage. HTML <div class="grid"> <div class="grid__item"> ...

What is the best way to achieve a curved outer edge for a rectangle using CSS?

I am trying to style the header and footer of my website, which is built using a SAAS CMS. Unfortunately, I am unable to change the HTML structure, but I can add custom CSS. My goal is to create curved headers and footers with upward and downward curves. I ...

Choose a group of radio buttons inside a container when a button is clicked

I have a bunch of containers containing radio buttons. The goal is for the container of a selected radio button to appear different: input[type="radio"]:checked+.container { border: 5px solid red; } <div class="container"> <input class="btn ...

Can we modify the cell width in knitr and pandoc?

When generating an HTML file using knitr/pandoc to display multiple tables in a loop, how can you ensure that each table has the same total width despite having varying numbers of cells? --- output: html_document: theme: cosmo --- {r results ="asis", e ...

"Exploring the process of integrating a controller into an external HTML file using AngularJS

I'm relatively new to AngularJS. In my web app, I have a set of buttons: index.html <button class="aButton">a</button> <button class="bButton">b</button> <script> $(document).ready(function(){ $(".aButton"). ...

Tips for avoiding duplicates when searching with the simple HTML DOM parser

Is there a way to exclude duplicate content from an HTML page using the simple HTML dom class? For example, if you check out this link: http://www.gutenberg.org/wiki/Category:Agriculture_Bookshelf, you'll notice that the term Forestry appears twice. ...

Tips for activating a function during a click on the download button within an audio tag in HTML

Is there a way to track the number of downloads when using an audio tag with a download option? Which event handler should I use for this task and how can I implement it? I have already set up a fully functional back end API, but I am struggling to unders ...

Grab the table headings from an HTML table and store them in variables after accessing the DOM

Looking to modify the structure of the DOM. Wanting to display table content using paragraphs instead. To achieve this, I need to extract data from each row in the table. How can I accomplish this task? <table style="width:300px"> <tr> ...

What is the best way to smoothly reveal images one by one?

My goal is to smoothly slide three images inside a div, one by one. However, I'm facing an issue where the images stack on top of each other and end up stuck in their original positions. Here is the code snippet I've been working with: <div ...

Show the WooCommerce checkout shipping fields and eliminate the "Choose a different delivery address?" checkbox

Is there a method to eliminate the checkbox labeled "Ship to a different address?" on the woocommerce checkout page while still displaying the shipping fields? I have attempted the following: add_filter( 'woocommerce_cart_needs_shipping_address', ...

Having trouble activating the Tailwind CSS or Intellisense features

I'm having trouble getting my React app to properly style divs using Tailwind CSS. The intellisense feature doesn't suggest any styling options for me either. import './App.css'; function App() { return ( <div className="t ...