How do I make the element fade and bounce, on the left?

Question

How do I make the element fade and bounce, on the left?

While learning CSS3 animation and experimenting with Daniel Eden , I tried to mix two of these upwards: fadeInLeft and bounceInLeft.

If I'm right:

An animation defined with an at-rule keyframe, I have to define its progress by setting its percentages up.
translate3d got three parameters (respectively x, y and z axes, I can guess).
I need to call my animation-defined rule on the element, class, or id I give the HTML tag I want to animate (this part is serious business hxc).

After the first hardcore mix, I had something like:

@keyframes fade_in_and_bounce_from_left
{
    0%, 60%, 75%, 90%, 100%
    {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0%
    {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }

    60%
    {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }

    75%
    {
        transform: translate3d(-10px, 0, 0);
    }

    90%
    {
        transform: translate3d(5px, 0, 0);
    }

    100%
    {
        opacity: 1;
        transform: none;
    }
}

/* For length purposes, I just put the "uncommercialized" version of the rule. My code actually has all the needed vendor prefixes. */

... which works just awful, if not at all. Then I refined the code myself to match my existing settings (for example, reducing the -3000px value to the same as my HTML body width), removed the time sync feature and added a few more steps, but the animation is now worse than it was before- either (while general animation remains a good start for what I want).

What do I want? Fading an element to the left of my body tag (not html) to the right to its position where it stops, but never in a straight line, more in smooth inflections.

The relative part of my HTML code looks like this:

<!--[…]-->
        <article>
            <div class="latest_article_preview fade_in_and_bounce_from_left_leftmost">
                <!--[…]-->
            </div>

            <div class="latest_article_preview fade_in_and_bounce_from_left_left">
                <!--[…]-->
            </div>

            <div class="latest_article_preview fade_in_and_bounce_from_left_right">
                <!--[…]-->
            </div>

            <div class="latest_article_preview fade_in_and_bounce_from_left_rightmost">
                <!--[…]-->
            </div>
        </article>
<!--[…]-->

<!--Each of the "fade_in_and_bounce_from_left_x-x" classes calls the fade_in_and_bounce_from_left keyframe at-rule with only a different time so that document divisions arrive one after another from the left with a fading effect then bounce at a slightly decreasing speed from the rightmost to leftmost ones (so that each one is slower than the precedent) to their place in the page until the last.-->

I have already verified that this is not an indentation issue.

The current look of my CSS is a complete mess and gives worse results than the original "hardcore mix", so I won't dump it. Could a good soul help me to look at London?

+3

css keyframe

user4205194 22 nov. 14 at 15:41

source to share

1 answer

chipChocolate.py · Accepted Answer · 2014-11-22T16:19:03+0000

The problem was here ---> animation: fade_in 0.25s linear 0 1 normal forwards running;

.

You do not need it. Replace it with:

animation: fade_in 0.25s 1;

And you were missing the prefixes -webkit-

and-moz-

Fiddle

/* […] */

/* At-rules */
 @-webkit-keyframes fade_in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
 @-moz-keyframes fade_in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes fade_in_and_bounce_from_left {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-3000px, 0, 0);
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        -webkit-transform: translate3d(25px, 0, 0);
        transform: translate3d(25px, 0, 0);
    }
    75% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0);
    }
    100% {
        opacity: 1;
    }
}
@-moz-keyframes fade_in_and_bounce_from_left {
    0%, 60%, 75%, 90%, 100% {
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        transform: translate3d(-3000px, 0, 0);
    }
    60% {
        opacity: 1;
        transform: translate3d(25px, 0, 0);
    }
    75% {
        transform: translate3d(-10px, 0, 0);
    }
    90% {
        transform: translate3d(5px, 0, 0);
    }
    100% {
        opacity: 1;
    }
}
/* […] */

/* Elements */
 html {
    background-color: rgb(251, 251, 251);
    color: rgb(0, 0, 0);
    border-color: rgb(54, 69, 79);
    font-family:"Times New Roman";
    font-size: 16px;
    margin: 0;
    padding: 0;
    width: 100%;
    animation: fade_in 0.25s 1;
}
body {
    margin: 0 auto 0 auto;
    width: 960px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* […] */
 article {
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
img {
    background: url(160x90.jpg);
    width: 100%;
}
/* […] */

/* Classes */

/* […] */
 .latest_article_preview {
    background-color: rgb(255, 255, 255);
    border-style: solid;
    border-width: 1px;
    border-color: rgb(191, 191, 191);
    border-radius: 1px;
    margin: 0 8px 0 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.fade_in_and_bounce_from_left_leftmost {
    -webkit-animation: fade_in_and_bounce_from_left 0.25s 1;
    animation: fade_in_and_bounce_from_left 0.25s 1;
}
.fade_in_and_bounce_from_left_left {
    -webkit-animation: fade_in_and_bounce_from_left 0.50s 1;
    animation: fade_in_and_bounce_from_left 0.50s 1;
}
.fade_in_and_bounce_from_left_right {
    -webkit-animation: fade_in_and_bounce_from_left 0.75s 1;
    animation: fade_in_and_bounce_from_left 0.75s 1;
}
.fade_in_and_bounce_from_left_rightmost {
    -webkit-animation: fade_in_and_bounce_from_left 1s 1;
    animation: fade_in_and_bounce_from_left 1s 1;
}
.latest_article_thumbnail {
}
.latest_article_start {
    text-align: justify;
    padding: 8px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.latest_article_headline {
    font-weight: bold;
    flex: 1;
    display: flex;
}
.latest_article_lede {
    flex: 1;
    display: flex;
}

/* […] */

<!--[…]-->

<body>
  <!--[…]-->

  <article>
    <div class="latest_article_preview fade_in_and_bounce_from_left_leftmost">
      <span class="latest_article_thumbnail"><img src="160x90.jpg" alt="Approximative 16:9"></img></span>
      <div class="latest_article_start">
        <span class="latest_article_headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        <span class="latest_article_lede">Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehi</span>
      </div>
    </div>

    <div class="latest_article_preview fade_in_and_bounce_from_left_left">
      <span class="latest_article_thumbnail"><img src="160x90.jpg" alt="Approximative 16:9"></img></span>
      <div class="latest_article_start">
        <span class="latest_article_headline">Vivamus fermentum semper porta.</span>
        <span class="latest_article_lede">Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit</span>
      </div>
    </div>

    <div class="latest_article_preview fade_in_and_bounce_from_left_right">
      <span class="latest_article_thumbnail"><img src="160x90.jpg" alt="Approximative 16:9"></img></span>
      <div class="latest_article_start">
        <span class="latest_article_headline">Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque.</span>
        <span class="latest_article_lede">Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibu</span>
      </div>
    </div>

    <div class="latest_article_preview fade_in_and_bounce_from_left_rightmost">
      <span class="latest_article_thumbnail"><img src="160x90.jpg" alt="Approximative 16:9"></img></span>
      <div class="latest_article_start">
        <span class="latest_article_headline">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</span>
        <span class="latest_article_lede">In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hen</span>
      </div>
    </div>
  </article>

  <!--[…]-->
</body>
<!--[…]-->

Run code Hide result

How do I make the element fade and bounce, on the left?

Fiddle

More articles: