在学习C.S.S.3动画和试验Daniel Eden时，我尝试将two of those混合起来：fadeInLeft和bounceInLeft。
如果我做对了：
在第一次硬核混音后，我得到了类似的东西：
@keyframes fade_in_and_bounce_from_left
{
0%, 60%, 75%, 90%, 100%
{
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0%
{
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60%
{
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75%
{
transform: translate3d(-10px, 0, 0);
}
90%
{
transform: translate3d(5px, 0, 0);
}
100%
{
opacity: 1;
transform: none;
}
}
/* For length purposes, I just put the "uncommercialized" version of the rule. My code actually has all the needed vendor prefixes. */
......如果根本不可行，那就非常有效。然后我自己对代码进行了改进，使其适合我现有的设置（例如将-3000px值减小到与我的HTML身体的宽度相同），删除了transition-timing-function并添加了更多步骤，但动画现在比以往更糟糕（虽然整体动画仍然是我想要的良好开端）。
我想要什么？一个元素从我的身体标签左边（不是html）向右褪色，直到它停止的位置，但从不以直线的方式，更多的是光滑的弹性。
我的H.T.M.L.受影响的部分代码如下：
<!--[…]-->
<article>
<div class="latest_article_preview fade_in_and_bounce_from_left_leftmost">
<!--[…]-->
</div>
<div class="latest_article_preview fade_in_and_bounce_from_left_left">
<!--[…]-->
</div>
<div class="latest_article_preview fade_in_and_bounce_from_left_right">
<!--[…]-->
</div>
<div class="latest_article_preview fade_in_and_bounce_from_left_rightmost">
<!--[…]-->
</div>
</article>
<!--[…]-->
<!--Each of the "fade_in_and_bounce_from_left_x-x" classes calls the fade_in_and_bounce_from_left keyframe at-rule with only a different time so that document divisions arrive one after another from the left with a fading effect then bounce at a slightly decreasing speed from the rightmost to leftmost ones (so that each one is slower than the precedent) to their place in the page until the last.-->
我已经检查过它不是缩进问题。
我C.S.S.的当前外观是一个完整的混乱，并产生最糟糕的结果，而不是原来的＆＃34;硬核混合＆＃34;，这就是为什么我不会把它转储到这里。 一个好心灵可以帮我把伦敦的样子给它吗？
答案 0 :(得分：2)
问题出在这里---＆gt; animation: fade_in 0.25s linear 0 1 normal forwards running;。
你并不需要这一切。替换为：
animation: fade_in 0.25s 1;
您错过了前缀-webkit-和-moz-
/* […] */
/* At-rules */
@-webkit-keyframes fade_in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fade_in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fade_in_and_bounce_from_left {
0%, 60%, 75%, 90%, 100% {
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(-3000px, 0, 0);
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(25px, 0, 0);
transform: translate3d(25px, 0, 0);
}
75% {
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
}
90% {
-webkit-transform: translate3d(5px, 0, 0);
transform: translate3d(5px, 0, 0);
}
100% {
opacity: 1;
}
}
@-moz-keyframes fade_in_and_bounce_from_left {
0%, 60%, 75%, 90%, 100% {
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0);
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0);
}
75% {
transform: translate3d(-10px, 0, 0);
}
90% {
transform: translate3d(5px, 0, 0);
}
100% {
opacity: 1;
}
}
/* […] */
/* Elements */
html {
background-color: rgb(251, 251, 251);
color: rgb(0, 0, 0);
border-color: rgb(54, 69, 79);
font-family:"Times New Roman";
font-size: 16px;
margin: 0;
padding: 0;
width: 100%;
animation: fade_in 0.25s 1;
}
body {
margin: 0 auto 0 auto;
width: 960px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* […] */
article {
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
}
img {
background: url(160x90.jpg);
width: 100%;
}
/* […] */
/* Classes */
/* […] */
.latest_article_preview {
background-color: rgb(255, 255, 255);
border-style: solid;
border-width: 1px;
border-color: rgb(191, 191, 191);
border-radius: 1px;
margin: 0 8px 0 8px;
flex: 1;
display: flex;
flex-direction: column;
}
.fade_in_and_bounce_from_left_leftmost {
-webkit-animation: fade_in_and_bounce_from_left 0.25s 1;
animation: fade_in_and_bounce_from_left 0.25s 1;
}
.fade_in_and_bounce_from_left_left {
-webkit-animation: fade_in_and_bounce_from_left 0.50s 1;
animation: fade_in_and_bounce_from_left 0.50s 1;
}
.fade_in_and_bounce_from_left_right {
-webkit-animation: fade_in_and_bounce_from_left 0.75s 1;
animation: fade_in_and_bounce_from_left 0.75s 1;
}
.fade_in_and_bounce_from_left_rightmost {
-webkit-animation: fade_in_and_bounce_from_left 1s 1;
animation: fade_in_and_bounce_from_left 1s 1;
}
.latest_article_thumbnail {
}
.latest_article_start {
text-align: justify;
padding: 8px;
flex: 1;
display: flex;
flex-direction: column;
}
.latest_article_headline {
font-weight: bold;
flex: 1;
display: flex;
}
.latest_article_lede {
flex: 1;
display: flex;
}
/* […] */<!--[…]-->
<body>
<!--[…]-->
<article>
<div class="latest_article_preview fade_in_and_bounce_from_left_leftmost">
<span class="latest_article_thumbnail"><img src="160x90.jpg" alt="Approximative 16:9"></img></span>
<div class="latest_article_start">
<span class="latest_article_headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
<span class="latest_article_lede">Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehi</span>
</div>
</div>
<div class="latest_article_preview fade_in_and_bounce_from_left_left">
<span class="latest_article_thumbnail"><img src="160x90.jpg" alt="Approximative 16:9"></img></span>
<div class="latest_article_start">
<span class="latest_article_headline">Vivamus fermentum semper porta.</span>
<span class="latest_article_lede">Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit</span>
</div>
</div>
<div class="latest_article_preview fade_in_and_bounce_from_left_right">
<span class="latest_article_thumbnail"><img src="160x90.jpg" alt="Approximative 16:9"></img></span>
<div class="latest_article_start">
<span class="latest_article_headline">Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque.</span>
<span class="latest_article_lede">Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibu</span>
</div>
</div>
<div class="latest_article_preview fade_in_and_bounce_from_left_rightmost">
<span class="latest_article_thumbnail"><img src="160x90.jpg" alt="Approximative 16:9"></img></span>
<div class="latest_article_start">
<span class="latest_article_headline">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</span>
<span class="latest_article_lede">In euismod ultrices facilisis. Vestibulum porta sapien adipiscing augue congue id pretium lectus molestie. Proin quis dictum nisl. Morbi id quam sapien, sed vestibulum sem. Duis elementum rutrum mauris sed convallis. Proin vestibulum magna mi. Aenean tristique hendrerit magna, ac facilisis nulla hen</span>
</div>
</div>
</article>
<!--[…]-->
</body>
<!--[…]-->