CSS3动画显示在2个属性上，而仅选择了1个

Question

I have this code:

@keyframes margin-title
{
0% {margin: -170px 0 0 0}
100% {margin: -130px 0 0 0}
}

@-webkit-keyframes margin-title
{
0% {margin: -170px 0 0 0}
100% {margin: -130px 0 0 0}
}

h1 {
    margin: -130px 0 0 0;
    text-shadow: 0 0 10px #000;
    animation: margin-title 1s ease, fade-title 4s;
        -webkit-animation: margin-title 1s ease, fade-title 4s;
}

HTML:

 <div id="home">
<h1>Photal</h1>

<p>lorem ipsum</p>

</div>

The problem is that the animation " keyframe-title " is not only showed on the header, but the paragraph too, while I don't have used any CSS code for my paragraph. They are both inside a div, that doesn't have any animation that could affect it (I guess).

Here's a jsfiddle so you'll understand: http://jsfiddle.net/ad3gP/1/

Thank You

Answer 1

Replace the end of your CSS file for this:

    h1 {
    width: 440px;
    float: left;
    text-align:center;
    margin: -130px 0 0 0;
    color:#FFF;
    font-size:70px;
    font-family: 'Berkshire Swash', cursive;
    text-shadow: 0 0 10px #000;
    opacity:0.7;
        filter:Alpha(opacity=70);
    transition:opacity 0.5s;
        -webkit-transition:opacity 0.5s;
    animation: margin-title 1s ease, fade-title 4s;
        -webkit-animation: margin-title 1s ease, fade-title 4s;
}

h1:hover {
    opacity:0.9;
        filter:Alpha(opacity=90);
}

table {
    margin-top: -30px;
}

(added float: left; and width: 440px; to h1 and margin-top: -30px; to table )

The reason it didn't work is that the table starts underneath your title. When the title moves down the table also moves down.