我的代码：http://codepen.io/anon/pen/dYOZYM
如何编辑CSS以便：
#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"><a href="strona.html">Title</a>
</div>
</center>
<hr>
<ol>
<li> <a href="www.wikipedia.org">Articled</a>
</li>
<li> <a href="www.wikipedia.org">Tasks</a>
</li>
<li> <a href="www.wikipedia.org">Galery</a>
</li>
<li> <a href="www.wikipedia.org">Contact</a>
</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>
答案 0 :(得分：3)
尝试使用延迟时使用CSS动画。
* {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><a href="#">Articles</a></li>
<li><a href="#">Tasks</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<article class="animated bounceInLeft">
<p><b>Microsoft Corporation</b> <span class="nowrap"><span class="IPA nopopups"><a href="/wiki/Help:IPA_for_English" title="Help:IPA for English">/<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>/</a></span></span> (commonly referred to as <b>Microsoft</b>) is an American <a href="/wiki/Multinational_corporation" title="Multinational corporation">multinational</a> <a href="/wiki/Technology_company" title="Technology company">technology company</a> headquartered in <a href="/wiki/Redmond,_Washington" title="Redmond, Washington">Redmond</a>, <a href="/wiki/Washington_(state)" title="Washington (state)">Washington</a>, that develops, manufactures, licenses, supports and sells <a href="/wiki/Computer_software" title="Computer software" class="mw-redirect">computer software</a>, <a href="/wiki/Consumer_electronics" title="Consumer electronics">consumer electronics</a> and <a href="/wiki/Personal_computers" title="Personal computers" class="mw-redirect">personal computers</a> and services. Its best known software products are the <a href="/wiki/Microsoft_Windows" title="Microsoft Windows">Microsoft Windows</a> line of <a href="/wiki/Operating_systems" title="Operating systems" class="mw-redirect">operating systems</a>, <a href="/wiki/Microsoft_Office" title="Microsoft Office">Microsoft Office</a> <a href="/wiki/Office_suite" title="Office suite" class="mw-redirect">office suite</a>, and <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a> and <a href="/wiki/Microsoft_Edge" title="Microsoft Edge">Edge</a> <a href="/wiki/Web_browser" title="Web browser">web browsers</a>. Its flagship hardware products are the <a href="/wiki/Xbox" title="Xbox">Xbox</a> game consoles and the <a href="/wiki/Microsoft_Surface" title="Microsoft Surface">Microsoft Surface</a> tablet lineup. It is the <a href="/wiki/List_of_the_largest_software_companies" title="List of the largest software companies">world's largest software maker</a> measured by revenues. It is also one of the <a href="/wiki/List_of_corporations_by_market_capitalization" title="List of corporations by market capitalization" class="mw-redirect">world's most valuable companies</a>.</p>
<p>Microsoft was founded by <a href="/wiki/Paul_Allen" title="Paul Allen">Paul Allen</a> and <a href="/wiki/Bill_Gates" title="Bill Gates">Bill Gates</a> on April 4, 1975, to develop and sell <a href="/wiki/BASIC" title="BASIC">BASIC</a> <a href="/wiki/Interpreter_(computer_software)" title="Interpreter (computer software)" class="mw-redirect">interpreters</a> for <a href="/wiki/Altair_8800" title="Altair 8800">Altair 8800</a>. It rose to dominate the <a href="/wiki/Personal_computer" title="Personal computer">personal computer</a> <a href="/wiki/Operating_system" title="Operating system">operating system</a> market with <a href="/wiki/MS-DOS" title="MS-DOS">MS-DOS</a> in the mid-1980s, followed by <a href="/wiki/Microsoft_Windows" title="Microsoft Windows">Microsoft Windows</a>. The company's 1986 <a href="/wiki/Initial_public_offering" title="Initial public offering">initial public offering</a>, 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 <a href="/wiki/List_of_mergers_and_acquisitions_by_Microsoft" title="List of mergers and acquisitions by Microsoft">made a number of corporate acquisitions</a>. In May 2011, Microsoft acquired <a href="/wiki/Skype_Technologies" title="Skype Technologies">Skype Technologies</a> for $8.5 billion in its largest acquisition to date.</p>
<p>As of 2015, Microsoft is market dominant in both the <a href="/wiki/IBM_PC-compatible" title="IBM PC-compatible" class="mw-redirect">IBM PC-compatible</a> operating system (while it lost the majority of the overall operating system market to <a href="/wiki/Android_(operating_system)" title="Android (operating system)">Android</a>) and <a href="/wiki/Office_software_suite" title="Office software suite" class="mw-redirect">office software suite</a> markets (the latter with <a href="/wiki/Microsoft_Office" title="Microsoft Office">Microsoft Office</a>). The company also produces a wide range of other software for desktops and servers, and is active in areas including <a href="/wiki/Web_search_engine" title="Web search engine">Internet search</a> (with <a href="/wiki/Bing" title="Bing">Bing</a>), the <a href="/wiki/Video_game_industry" title="Video game industry">video game industry</a> (with the <a href="/wiki/Xbox_(console)" title="Xbox (console)">Xbox</a>, <a href="/wiki/Xbox_360" title="Xbox 360">Xbox 360</a> and <a href="/wiki/Xbox_One" title="Xbox One">Xbox One</a> consoles), the digital services market (through <a href="/wiki/MSN" title="MSN">MSN</a>), and mobile phones (via the operating systems of Nokia's former phones and <a href="/wiki/Windows_Phone" title="Windows Phone">Windows Phone</a> OS). In June 2012, Microsoft entered the personal computer production market for the first time, with the launch of the <a href="/wiki/Microsoft_Surface" title="Microsoft Surface">Microsoft Surface</a>, a line of <a href="/wiki/Tablet_computer" title="Tablet computer">tablet computers</a>.</p>
<p>With the acquisition of Nokia's devices and services division to form <a href="/wiki/Microsoft_Mobile" title="Microsoft Mobile">Microsoft Mobile Oy</a>, the company re-entered the smartphone hardware market, after its previous attempt, <a href="/wiki/Microsoft_Kin" title="Microsoft Kin">Microsoft Kin</a>, which resulted from their acquisition of <a href="/wiki/Danger_(company)" title="Danger (company)">Danger Inc.</a></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>