ホームページ > 記事 > ウェブフロントエンド > css3で提案アニメーションを実現
この記事は、CSS3 でのプロポーズの小さなアニメーションの実装を主に紹介しています。これは、必要な友人に参考にしていただけるようになりました。そして、CSS は非常に強力で、やりたいことさえあれば、すべてが可能であることをすぐに感じました。
最初にレンダリングを表示します
それからステップごとに分析します:
最初は、先ほど登場した新郎のアニメーションです
.w-m img{ margin-right: 0; float: right; margin-top: 60px; animation: toWoman 0.5s ease .5s both; } @keyframes toWoman{ 0%{ opacity: 0; transform: translate(-200px); } 100%{ opacity: 1; transform: translate(0); } }その中で使用されている知識ポイント:
animation-duration指定しますアニメーションが完了するまでにかかる時間 (秒またはミリ秒)
animation-timing-function はアニメーションの速度曲線を指定します
animation-delay はアニメーションが開始するまでの遅延を指定します
animation-iteration-countは、アニメーションを再生する回数を指定します
animation-directionは、アニメーションを順番に逆方向に再生するかどうかを指定します
transform
.w-f{ position: absolute; z-index: 20; left: 50%; margin-left: -30px; margin-top: 75px; } .w-f img{ width: 60px; animation: show 0.4s ease 1s both; } @keyframes show{ 0%{ opacity: 0; transform: scale(0.1,0.1); } 100%{ opacity: 1; transform: scale(1,1); } }
.w-t-m{ position: absolute; left: 50%; z-index: 10; line-height: 80px; color: #ff720a; letter-spacing: 5px; opacity: 0; animation: titleBloom 1s linear 1s both; font-size: 26px; margin-left: -125px; } @keyframes titleBloom{ 0% { transform: translate(-50px); } 100% { opacity: 1; transform: translate(0); } }
.w-t img{ opacity: 0; animation: bloom 2s ease 1.2s infinite; } .w-t img.boom2{ float: right; animation: bloom 2s ease 1.5s infinite; } .w-t img.boom3{ position: absolute; margin-top: 40px; animation: bloom 2s ease 1.4s infinite; } @keyframes bloom{ 0% { transform: scale(0,0); } 100% { opacity: 1; transform: scale(1,1); } }
.w-fls{ width: 820px; margin: 0 auto; } .w-fls img{ height: 120px; z-index: 400; animation: showFlows 0.4s ease 2.3s both; } @keyframes showFlows{ 0%{ opacity: 0; transform: translate(0,200px); } 100%{ opacity: 1; transform: translate(0); } } .w-2{ margin-top: -130px; padding-left: 100px; } .w-2 img{ animation: showFlows 0.4s ease 2.7s both; }
写到这里,觉得前端开发原来是这么有趣的一件事哈~
相关推荐:
以上がcss3で提案アニメーションを実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。