Css animations, show up from top and left [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
My codepen: http://codepen.io/anon/pen/dYOZYM
How can I edit the CSS so that it:
title and menu slide from top
article slide from left
image slide from right
#title a {
text-decoration: none;
font-size: 72px;
display: block;
color: black;
width: 100%;
animation-name: anim-title;
animation-duration: 5s
}
ol {
margin: 0px;
}
ol li {
list-style: none;
float: left;
width: 24%;
height: 4%;
transition-duration: 1s;
padding-top: 0.3%;
padding-bottom: 0.3%;
margin: 2px;
background-color: #BBBBBB;
border-radius: 5px;
}
#keyframes anim-article {
from {
margin-left: -60%;
}
to {
margin-left: 40px
}
}
#keyframes anim-title {
from {
margin-top: -100%;
}
to {
margin-top: 0px
}
}
ol li:hover {
background-color: #5D0102;
width: 26%;
}
li a {
text-decoration: none;
color: black;
display: block;
text-align: center;
padding: 1%;
font-size: 20px
}
#obraz>img {
height: 66%;
width: 40%;
margin-left: 40px;
float: left;
margin-top: 16px;
border: 2px solid #5D0102;
box-shadow: 0 0 10px black;
}
#article {
float: left;
width: 50%;
height: 67.5%;
margin-left: 40px;
background-color: white;
border: 2px solid #5D0102;
box-shadow: 0px 0px 10px black;
margin-top: 16px;
background-image: url();
animation-name: anim-article;
animation-duration: 5s
}
body {
background-size: 1366px 768px
}
hr {
background-color: #5D0102;
color: #5D0102;
height: 2px;
width: 94%;
}
<center>
<div id="title">Title
</div>
</center>
<hr>
<ol>
<li> Articled
</li>
<li> Tasks
</li>
<li> Galery
</li>
<li> Contact
</li>
</ol>
<br>
<br>
<hr>
<div id="article">
<article>
<h2><p>Title article</p></h2>
<p><font color="red">Curae, Donec est. Lorem ipsum primis in magna fringilla sem condimentum vitae, consequat lobortis diam. In gravida sit amet, consectetuer lobortis volutpat. Nam molestie. Phasellus a odio eget orci luctus ullamcorper risus. Nunc eleifend vel, nisl. Vestibulum ante ipsum ac imperdiet quis, lorem. Pellentesque suscipit dolor. Pellentesque felis. Mauris auctor varius. Cras non felis. Nam vestibulum. Aenean ut lacus diam id justo luctus et fringilla enim. Etiam tincidunt in, libero. Nulla augue id leo lacus, ullamcorper risus. Vivamus malesuada augue eget dolor ut tortor ante libero ante, luctus at, bibendum ac, eleifend mauris viverra nonummy, leo felis non sem. Suspendisse.</font>
</p>
<br>
<p><font color="blue">Curae, Donec est. Lorem ipsum primis in magna fringilla sem condimentum vitae, consequat lobortis diam. In gravida sit amet, consectetuer lobortis volutpat. Nam molestie. Phasellus a odio eget orci luctus ullamcorper risus. Nunc eleifend vel, nisl. Vestibulum ante ipsum ac imperdiet quis, lorem. Pellentesque suscipit dolor. Pellentesque felis. Mauris auctor varius. Cras non felis. Nam vestibulum. Aenean ut lacus diam id justo luctus et fringilla enim. Etiam tincidunt in, libero. Nulla augue id leo lacus, ullamcorper risus. Vivamus malesuada augue eget dolor ut tortor ante libero ante, luctus at, bibendum ac, eleifend mauris viverra nonummy, leo felis non sem. Suspendisse.</font>
</p>
<br>
<p><font color="green">Curae, Donec est. Lorem ipsum primis in magna fringilla sem condimentum vitae, consequat lobortis diam. In gravida sit amet, consectetuer lobortis volutpat. Nam molestie. Phasellus a odio eget orci luctus ullamcorper risus. Nunc eleifend vel, nisl. Vestibulum ante ipsum ac imperdiet quis, lorem. Pellentesque suscipit dolor. Pellentesque felis. Mauris auctor varius. Cras non felis. Nam vestibulum. Aenean ut lacus diam id justo luctus et fringilla enim. Etiam tincidunt in, libero. Nulla augue id leo lacus, ullamcorper risus. Vivamus malesuada augue eget dolor ut tortor ante libero ante, luctus at, bibendum ac, eleifend mauris viverra nonummy, leo felis non sem. Suspendisse.</font>
</p>
</article>
</div>
<div id="obraz">
<img src="obrazek.gif" alt="image .gif">
</div>

Answer 1

Try using the CSS animations this way using the delays.
* {font-family: 'Segoe UI'; box-sizing: border-box; margin: 0; padding: 0; list-style: none;}
body {text-align: center; overflow: hidden;}
header {margin: 0 0 15px; }
header nav ul {display: block; margin: 5px 0;}
header nav ul li {display: inline-block; margin: 5px;}
header nav ul li a {text-decoration: none; display: block; padding: 5px; border: 1px solid #999; border-radius: 5px; color: #000;}
header nav ul li a:hover {background-color: #ccf; border-color: #99f;}
article, aside {display: inline-block; width: 65%; vertical-align: top; text-align: justify; margin-right: 2%;}
aside {width: 25%;}
aside img {max-width: 100%; display: block;}
/* Transition */
header {animation-delay: 0;}
article {animation-delay: 0.5s;}
aside {animation-delay: 1s;}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
#-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
}
}
#keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-2000px);
}
60% {
opacity: 1;
transform: translateY(30px);
}
80% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInLeft {
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 bounceInLeft {
0% {
opacity: 0;
transform: translateX(-2000px);
}
60% {
opacity: 1;
transform: translateX(30px);
}
80% {
transform: translateX(-10px);
}
100% {
transform: translateX(0);
}
}
.bounceInLeft {
-webkit-animation-name: bounceInLeft;
animation-name: bounceInLeft;
}
#-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;
}
<header class="animated bounceInDown">
<h1>Title</h1>
<nav>
<ul>
<li>Articles</li>
<li>Tasks</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>
<article class="animated bounceInLeft">
<p><b>Microsoft Corporation</b> <span class="nowrap"><span class="IPA nopopups">/<span style="border-bottom:1px dotted"><span title="/ˈ/ primary stress follows">ˈ</span><span title="'m' in 'my'">m</span><span title="/aɪ/ long 'i' in 'tide'">aɪ</span><span title="'k' in 'kind'">k</span><span title="'r' in 'rye'">r</span><span title="/ɵ/ variable 1st 'o' in 'omission'">ɵ</span><span title="'s' in 'sigh'">s</span><span title="/ɒː/ variable 'o' as in 'coffee'">ɒː</span><span title="'f' in 'find'">f</span><span title="'t' in 'tie'">t</span></span>/</span></span> (commonly referred to as <b>Microsoft</b>) is an American multinational technology company headquartered in Redmond, Washington, that develops, manufactures, licenses, supports and sells computer software, consumer electronics and personal computers and services. Its best known software products are the Microsoft Windows line of operating systems, Microsoft Office office suite, and Internet Explorer and Edge web browsers. Its flagship hardware products are the Xbox game consoles and the Microsoft Surface tablet lineup. It is the world's largest software maker measured by revenues. It is also one of the world's most valuable companies.</p>
<p>Microsoft was founded by Paul Allen and Bill Gates on April 4, 1975, to develop and sell BASIC interpreters for Altair 8800. It rose to dominate the personal computer operating system market with MS-DOS in the mid-1980s, followed by Microsoft Windows. The company's 1986 initial public offering, and subsequent rise in its share price, created three billionaires and an estimated 12,000 millionaires from Microsoft employees. Since the 1990s, it has increasingly diversified from the operating system market and has made a number of corporate acquisitions. In May 2011, Microsoft acquired Skype Technologies for $8.5 billion in its largest acquisition to date.</p>
<p>As of 2015, Microsoft is market dominant in both the IBM PC-compatible operating system (while it lost the majority of the overall operating system market to Android) and office software suite markets (the latter with Microsoft Office). The company also produces a wide range of other software for desktops and servers, and is active in areas including Internet search (with Bing), the video game industry (with the Xbox, Xbox 360 and Xbox One consoles), the digital services market (through MSN), and mobile phones (via the operating systems of Nokia's former phones and Windows Phone OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the Microsoft Surface, a line of tablet computers.</p>
<p>With the acquisition of Nokia's devices and services division to form Microsoft Mobile Oy, the company re-entered the smartphone hardware market, after its previous attempt, Microsoft Kin, which resulted from their acquisition of Danger Inc.</p>
<p>Microsoft is a portmanteau of the words <b>micro</b>computer and <b>soft</b>ware.</p>
</article>
<aside class="animated bounceInRight">
<img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Microsoft_building_17_front_door.jpg" alt="Image" />
</aside>