Develop Reference

Fading top and bottom edges of a semi transparent and scrollable div with a background video

So I have a div that contains a fixed height and inside it there is another one with overflow: auto that lets the div be scrollable. The parent div is semi-transparent and in the background of everything there is a video being played.
HTML:
<div class="parent">
<div class="fade-top"/>
<div class="fade-bottom"/>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
</div>
</div>
CSS:
.parent{
height: 2rem;
position: relative
background: hsla(180, 2%, 8%, 0.76);
}
.fade-top {
poistion: absolute;
top: 0;
background: linear-gradient(0deg, hsla(180, 2%, 8%, 0.76) 20%, transparent 100%);
height: 50px;
transition: opacity 0.3s;
}
.fade-bottom {
position: absolute;
bottom: 0;
background: linear-gradient(180deg, $content-bg-elementum 20%, transparent 100%);
height: 50px;
transition: opacity 0.3s;
}
.text {
overflow: auto;
}
Question:
How do I make the top and bottom divs fade gradually to mix with the parent semi-transparent color?
Current state, the red board has to be mixed with the parent background and not cut by the height of the parent:

You can use After and before for fade top and bottom instead of using extra divs.
The code will be like.
HTML
<div class="parent">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
</div>
</div>
CSS
.parent{
position: relative;
width: 600px;
background: hsla(180, 2%, 8%, 0.76);
color: white;
}
.parent:before{
content: "";
width:100%;
height:40px;
background: linear-gradient(black, transparent);
position:absolute;
top: 0;
}
.parent::after{
content: "";
width:100%;
height:40px;
background: linear-gradient(transparent, black);
position:absolute;
bottom: 0;
}
.text {
overflow-y: auto;
height: 200px;
}
https://codepen.io/suffiyan1/pen/vYeyjZo

So I finally found a way around this using the CSS property mask. Like this:
HTML:
<div class="parent fade-top-bottom">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit!
Adipisci, aspernatur minima nobis at distinctio eveniet sunt aliquid, iure
laboriosam. Possimus dolore earum delectus ipsa, sequi blanditiis veritatis!Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, ipsam, sit! Adipisci,
aspernatur minima nobis at distinctio eveniet sunt aliquid, iure laboriosam.
</div>
</div>
CSS:
.parent{
height: 2rem;
position: relative
background: hsla(180, 2%, 8%, 0.76);
}
.fade-top-bottom {
mask:
linear-gradient(to top, transparent 10%, black 80%, transparent 100%),
linear-gradient(to bottom, transparent 10%, black 80%, transparent 100%);
}
.text {
overflow: auto;
}

How do I fix red and green blocks with CSS ？

everyone
Would like to ask at present I am making a version when the web page to slide up the red and green block to be fixed, only the yellow block can slide!
The current treatment on the green side is using
position:sticky;
right:0px;
top:100px;
The grammar keeps him fixed there, but there's a problem because if you don't give height it looks like it's position:sticky; I want his height to be customizable, so I give him a height of 200px; As a result, when the content is too much or in RWD mode, it goes out of the green zone.
Is there a better way to fix the red and green blocks?
Here's what I'm trying to do so far.
https://codepen.io/hong-wei/pen/wvgbbye?editors=1100

Add align-items: flex-start; to your .container class and remove any height value from the aside.
.wrap{
background-color: #ccc;
line-height: 1.5;
}
.header{
position: fixed;
width: 100%;
background-color: #f75454;
box-shadow:0px 1px 30px #212529;
z-index: 1;
}
.header .list{
display: flex;
padding:20px;
justify-content:space-between;
}
.container{
display: flex;
padding:30px;
padding-top: 100px;
background-color: #5c5c5c;
align-items: flex-start;
}
.main{
flex:2;
padding:20px;
height: 1600px;
margin:0px 20px;
background-color: #f9cf5a;
}
.aside{
position:sticky;
right:0px;
top:100px;
padding:20px;
flex:1;
width: 100%;
background-color: #1ba784;
color:#eef7f2;
}
<div class="wrap">
<div class="header">
<ul class="list">
<li>測試</li>
<li>測試</li>
</ul>
</div>
<div class="container">
<div class="main">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum expedita pariatur facere repellat nobis sed modi, porro, at numquam accusantium aut consequuntur delectus ducimus atque officia dolores! Dolore quas delectus fuga accusantium quia atque esse, non, aut quae optio officia odit natus accusamus, libero iure nam? Accusantium veritatis ad repellat.</p>
</div>
<div class="aside">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda officiis sunt laboriosam impedit fuga tenetur pariatur distinctio ipsum suscipit.</p>
</div>
</div>
</div>

Side Menu alpha not working over body tag

I have a side navigation menu on my site. When pressed, it calls a JavaScript function that changes the alpha channel of the body tag. For some reason only part of the screen's alpha channel is changing (section, img, bootstrap containers are not). The section tag has a class that gives it a background color, I'm thinking this might be the issue. Which would be the smart way to get this working?
This is the code I'm using for the alpha management:
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "350px";
document.body.style.background = "rgba(0,0,0,0.4)";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.background = "rgba(0,0,0,0)";
}
The html goes like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cripto Frog</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Rammetto+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<script src="sidebar.js"></script>
</head>
<main>
<header>
<span class="menu_burger" onclick="openNav()"><i class="fas fa-align-justify"></i></i></span>
<img src="img/frog.jpg" alt="">
</header>
<body>
<!-- Side Menu -->
<div id="mySidenav" class="sidenav">
×
TOP_TEN_COINS
ALT_COINS
WHITE_PAPERS
YOUTUBERS
EXCHANGES
NEWS_SITES
CONTACTO
<section class="nav_divididor"></section>
<section class="nav_footer">hlkjhlkjhlk</section>
</div>
<section class="primera_section"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam doloremque excepturi molestias aut fuga ullam aliquid minus dolores voluptatem non, beatae placeat soluta libero eos et delectus nemo minima iusto.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error aspernatur officiis, sint fugiat unde quos labore laborum cupiditate voluptates, totam sunt ut quod praesentium omnis et consequuntur sapiente incidunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit iure eveniet a voluptas cumque! Eos qui, iusto neque, fugit praesentium totam soluta eius laudantium cupiditate dolorem dignissimos ut minus veritatis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla earum soluta nesciunt dicta officia reprehenderit autem, molestias explicabo et accusamus, officiis nostrum cumque perspiciatis suscipit veniam molestiae fuga tenetur modi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate itaque atque molestiae, id fugit, quidem hic rem cum praesentium dolor perspiciatis nostrum sapiente enim corrupti doloremque aliquam voluptas cumque omnis.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam iusto dolor nostrum voluptate quos consectetur facere, quia, earum non, tenetur, officia laboriosam cumque suscipit itaque nobis obcaecati. Facilis veritatis, repudiandae.p</p>
</section>
<!-- Use any element to open the sidenav -->
</body>
<span onclick="openNav()">open</span>
</main>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>
</html>
css file
/* Secciones */
html{
margin-top: 0px;
/*overflow: hidden; */
}
body{
/* overflow-x: hidden;*/
}
p{
font-family: 'Lora';
font-style: normal;
font-weight: 700;
}
fieldset {
font-family: 'Lora';
font-style: normal;
font-weight: 100;
}
.nav_footer{
height: 90%;
background-color: black; /* Black*/
color: white;
display: flex;
align-items: flex-end;
/*overflow-x: hidden; */
}
.nav_divididor{
width: 100%;
background-color: #388E3C;
height: 12px;
}
.primera_section{
width: 100%;
height: 700px;
background-color: #FFFFFF; /* Black*/
}
.segunda_section{
width: 100%;
height: 700px;
background-color: #C8E6C9; /* Black*/
}
.tercera_section{
width: 100%;
height: 700px;
background-color: #BDBDBD; /* Black*/
}
.divisoria {
width: 100%;
background-color: black;
height: 2px;
}
.menu_burger{
position: absolute;
top:2;
}
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: white; /* Dark Green*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.8s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav::-webkit-scrollbar {
display: none;
}
/* The navigation menu links */
.sidenav a {
font-family: 'Lora';
font-style: normal;
font-weight: 700;
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: black;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: grey;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

Applying CSS properties dynamically using jQuery

I am working on a mobile ePub reader. One functionality I would like to implement is adding expandable notes, which would be tied to highlighted words.
I would like to know how to iterate over the set of created marginalia and apply the background color and offset that I got for each highlight. In other words, each marginale should have the same background color as its highlight, and have the same offset from the top of the screen (so that both are aligned).
Thanks,
function Marginale(offset, color) {
this.offset = offset;
this.color = color;
}
(function createMarginalia() {
let $highlights;
$highlights = $('.highlight');
$highlights.each(function() {
let color, offset, screen;
let $marginalia;
color = $(this).css('backgroundColor');
offset = $(this).position().top;
screen = $('#screen');
screen.append('<div class="marginale"></div>');
$marginalia = $('.marginale');
$marginalia.each(function() {
$(this).css({
'backgroundColor': color,
'top': offset
});
});
});
})();
(function hideNavOnScroll() {
let nav, screen, yPos;
nav = $('nav');
yPos = 0;
screen = $('#screen');
screen.scroll(function() {
let yOffset = $(this).scrollTop();
if (yOffset > yPos) {
nav.fadeOut();
} else {
nav.fadeIn();
}
yPos = yOffset;
});
})();
#import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
--dpi: 2;
--texidiumGreen: #00857c;
--slateGrey: #47484a;
--lightGrey: #eee;
--mediumGrey: #aaa;
--redHighlightColor: rgba(255, 0, 0, 0.2);
--greenHighlightColor: rgba(0, 255, 0, 0.2);
--blueHighlightColor: rgba(0, 0, 255, 0.2);
--yellowHighlightColor: rgba(255, 255, 0, 0.2);
--grayHighlightColor: rgba(0, 0, 0, 0.2);
--fontSize: 12.5px;
--appBarHeight: 54px;
--bottomBarHeight: 64px;
--contentPadding: 40px;
--marginaleSize: calc(var(--contentPadding) - 8px);
}
body {
background-color: var(--lightGrey);
}
#phone {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 30px var(--mediumGrey);
}
#screen {
width: calc(750px / var(--dpi));
height: calc(1334px / var(--dpi));
overflow-y: scroll;
background-color: white;
}
::-webkit-scrollbar {
display: none;
}
#app-bar {
position: fixed;
top: 0;
width: 100%;
height: var(--appBarHeight);
background-color: var(--texidiumGreen);
}
#bottom-bar {
position: fixed;
bottom: 0;
width: 100%;
height: var(--bottomBarHeight);
background-color: var(--slateGrey);
}
.hide-nav {
visibility: hidden;
}
#content {
padding-right: var(--contentPadding);
padding-left: var(--contentPadding);
font-size: var(--fontSize);
font-family: Roboto;
line-height: 1.5;
}
h1:first-of-type {
margin-top: calc(var(--fontSize) * 2 + var(--appBarHeight));
}
h1 {
margin-top: calc(var(--fontSize) * 2);
font-size: calc(var(--fontSize) * 2);
font-weight: bold;
}
h2 {
margin-top: calc(var(--fontSize) * 1.5);
font-weight: bold;
}
p {
margin-top: var(--fontSize);
}
p:last-of-type {
margin-bottom: var(--fontSize);
}
.highlight.highlight-red {
background-color: var(--redHighlightColor);
}
.highlight.highlight-green {
background-color: var(--greenHighlightColor);
}
.highlight.highlight-blue {
background-color: var(--blueHighlightColor);
}
.highlight.highlight-yellow {
background-color: var(--yellowHighlightColor);
}
.highlight.highlight-gray {
background-color: var(--grayHighlightColor);
}
.marginale {
width: var(--marginaleSize);
height: var(--marginaleSize);
border-radius: 50%;
line-height: var(--marginaleSize);
color: white;
/*background: black;*/
}
.marginale {
text-align: center;
cursor: pointer;
}
.marginale:before {
font-family: FontAwesome;
content: '\f249';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="phone">
<div id="screen">
<nav id="app-bar"></nav>
<div id="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? <span class="highlight highlight-red">Numquam itaque velit dolor explicabo aut, laborum?</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<h2>Dolor Sit Amet</h2>
<p><span class="highlight highlight-green">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
<p><span class="highlight highlight-yellow">Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque
velit dolor explicabo aut, laborum? Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="highlight highlight-blue">Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim?</span> Numquam itaque velit dolor explicabo aut, laborum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum? Lorem ipsum
dolor sit amet, consectetur adipisicing elit. <span class="highlight highlight-gray">Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste laboriosam magni corporis, similique labore ipsa, consequuntur eos, odit corrupti quaerat necessitatibus doloremque enim? Numquam itaque velit dolor explicabo aut, laborum?</p>
</div>
<nav id="bottom-bar"></nav>
</div>
</div>

Jquery : animate image on scroll

I want to animate an image in specific part of page when page is scrolled to that area. Animation should be like this: when page loads that image is invisible and as we scroll down that image fadesIn and moves from right to left 100px .
this is what i did to get scroll position
jQuery(document).ready(function($){
$('.myimages').hide();
var target = $(".img-div").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >=target)
{
$('.myimages').fadeIn();
}
}, 250);
});
now instead of image fading in what i need to animate it as per above mentioned criteria i tried something like this
$('.myimages').animate({right:'100'}, 200);
but this did not work please help me with it

Instead of firing a setInterval every few seconds, you can bind it to the window's scroll event.
$(window).scroll(function () {
if ($(window).scrollTop() >= target)
$('.myimages').fadeIn();
});
To animate the right and other similar CSS properties, you need to set the .image's position to be something else than static.
$('.myimages').animate({
right: 100
}, 200);
So, you need this in CSS:
.myimages {position: absolute;}
Working Snippet
$(function () {
$("img").hide();
$(window).scroll(function () {
if ($(window).scrollTop() > $("img").scrollTop())
$("img").show().addClass("bounceInRight");
});
});
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
#-webkit-keyframes bounceInRight {
0% {
opacity: 0;
-webkit-transform: translateX(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateX(-30px);
}
80% {
-webkit-transform: translateX(10px);
}
100% {
-webkit-transform: translateX(0);
}
}
#keyframes bounceInRight {
0% {
opacity: 0;
transform: translateX(2000px);
}
60% {
opacity: 1;
transform: translateX(-30px);
}
80% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.bounceInRight {
-webkit-animation-name: bounceInRight;
animation-name: bounceInRight;
}
img {max-width: 100%;}
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<h1>Animation</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, unde amet a repellat tempora ipsum! Maiores minima sapiente blanditiis, asperiores necessitatibus corporis incidunt! Ex, praesentium aliquam omnis dicta quo. Quisquam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eius eligendi praesentium doloremque voluptatibus, vero sed aspernatur officia eum repellat unde dolore ut eaque esse, officiis natus harum vel eos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta atque beatae temporibus et officiis enim, rem facere! Voluptatibus adipisci, odit in necessitatibus explicabo eveniet culpa. Nisi praesentium quasi error ducimus!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus autem facere ipsa ratione excepturi praesentium. Reiciendis aut praesentium earum laboriosam, architecto quasi error, corporis, nesciunt maxime distinctio quo nisi debitis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati eos, consequatur voluptatibus harum deserunt! Fugit voluptatem veniam atque, odio aut qui iste laudantium, nemo error vero natus eaque unde sunt!</p>
<p><img src="https://assets.keycdn.com/img/cdn-network.svg" alt="" class="animated" /></p>