牛猫笔记

html 部分

<div class="target"></div>

css 部分

.target {
    position: relative;
    -webkit-animation: fadeDown 0.5s;
    -moz-animation: fadeDown 0.5s;
    -ms-animation: fadeDown 0.5s;
    -o-animation: fadeDown 0.5s;
    animation: fadeDown 0.5s;
}

@-webkit-keyframes fadeDown {
    0%{top: -100px;opacity: 0}
    100%{top: 0;opacity: 1}
}
@-moz-keyframes fadeDown {
    0%{top: -100px;opacity: 0}
    100%{top: 0;opacity: 1}
}
@-ms-keyframes fadeDown {
    0%{top: -100px;opacity: 0}
    100%{top: 0;opacity: 1}
}
@-o-keyframes fadeDown {
    0%{top: -100px;opacity: 0}
    100%{top: 0;opacity: 1}
}
@keyframes fadeDown {
    0%{top: -100px;opacity: 0}
    100%{top: 0;opacity: 1}
}