背景画像を含む ID を CSS だけでフェードインするにはどうすればよいですか?
これが私のcssファイルにあるものです:
#header{
clear:both;
position:relative;
z-index: 999;
border-top: 3px solid #4C718F;
border-bottom: 1px solid #C1D7E2;
background: url(images/top-bg.png) repeat top right;
animation: fadein 3s;
-moz-animation: fadein 3s; /* Firefox */
-webkit-animation: fadein 3s; /* Safari and Chrome */
-o-animation: fadein 3s; /* Opera */
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:3;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:3;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:3;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 3;
}
}
}
背景画像はまったく色褪せていません。助けていただければ幸いです、ありがとう。
編集-- ここで、HTML でクラスを呼び出しています。
<div id="header-out">
<div id="header">
<div class="top-bar-wrap">
<div id="top" class="col-full">
<div id="logo" class="col-full">
<?php if ($woo_options['woo_texttitle'] <> "true") : $logo = $woo_options['woo_logo']; ?>
<a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('description'); ?>">
<img id="ML" src="<?php if ($logo) echo $logo; else { bloginfo('template_directory'); ?>/images/logo.png<?php } ?>" alt="<?php bloginfo('name'); ?>" />
</a>
<?php endif; ?>
<?php if( is_singular() && !is_front_page() ) : ?>
<span class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></span>
<?php else : ?>
<h1 class="site-title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php endif; ?>
<span class="site-description"><?php bloginfo('description'); ?></span>
</div><!-- /#logo -->
<?php if ( $woo_options['woo_ad_top'] == 'true' ) { ?>
<div id="topad">
<?php if ($woo_options['woo_ad_top_adsense'] <> "") { echo stripslashes($woo_options['woo_ad_top_adsense']); } else { ?>
<a href="<?php echo $woo_options['woo_ad_top_url']; ?>"><img src="<?php echo $woo_options['woo_ad_top_image']; ?>" width="468" height="60" alt="advert" /></a>
<?php } ?>
</div><!-- /#topad -->
<?php } ?>
<div id="navigation" class="asotv">
<img src="wp-content/themes/biznizz/images/as-seen-on-tv.png">
<?php
if ( function_exists('has_nav_menu') && has_nav_menu('primary-menu') ) {
wp_nav_menu( array( 'depth' => 6, 'sort_column' => 'menu_order', 'container' => 'ul', 'menu_id' => 'main-nav', 'menu_class' => 'nav fl', 'theme_location' => 'primary-menu' ) );
} else {
?>
<ul id="main-nav" class="nav fl">
<?php
if ( isset($woo_options['woo_custom_nav_menu']) AND $woo_options['woo_custom_nav_menu'] == 'true' ) {
if ( function_exists('woo_custom_navigation_output') )
woo_custom_navigation_output();
} else { ?>
<?php if ( is_page() ) $highlight = "page_item"; else $highlight = "page_item current_page_item"; ?>
<li class="<?php echo $highlight; ?>"><a href="<?php bloginfo('url'); ?>"><?php _e('Home', 'woothemes') ?></a></li>
<?php
wp_list_pages('sort_column=menu_order&depth=6&title_li=&exclude=');
}
?>
</ul><!-- /#nav -->
<?php } ?>
</div><!-- /#navigation -->
<div class="fix"></div>
</div><!-- /#top -->
</div>
<?php //if ($woo_options['woo_slider'] == 'true' && is_home()) include ( TEMPLATEPATH . '/includes/featured.php' ); ?>
</div><!-- /#header -->
</div><!-- /#header-out -->