### [アニメーション切り替えフォームの作成方法](https://wpforms.com/developers/how-to-create-an-animated-toggle-form/) **公開日:** 2023年6月21日 **著者:** エディトリアルチーム **抜粋:** このチュートリアルでは、わずかなCSSでアニメーション切り替えフォームを作成する方法を紹介します。 **コンテンツ:** ## はじめに アニメーション切り替えフォームを作成したいですか？これは非常にシンプルで簡単で、わずかなCSSで実現できます。このチュートリアルでは、[税務申告クライアント受付フォームテンプレート](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "WPForms 税務申告クライアント受付フォームテンプレート")を使用して、その方法を正確に説明します。 ## フォームの作成 まず、**税務申告クライアント受付フォームテンプレート**を基に新しいフォームを作成することから始めます。これを行うには、WordPress管理画面から **WPForms » フォームテンプレート** に移動し、**テンプレートを検索** フィールドに **tax** と入力すると、テンプレートが表示されます。このテンプレートにカーソルを合わせると、**フォームを作成** をクリックします。  このテンプレートは、メインの **チェックボックス** セクションのいずれかをクリックしたときにフォームのセクションを表示および非表示にする条件付きロジックが既に設定されています。これらにアニメーションを適用することで、条件付きロジックがトリガーされたときの遷移がよりスムーズになります。 ## CSSの追加 次に、トランジションを適用するCSSを追加します。カスタムCSSの追加方法や場所についてサポートが必要な場合は、[このチュートリアルをご覧ください](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "WPFormsのカスタムCSSスタイルの追加方法")。 ``` #wpforms-form-3342 .wpforms-conditional-show { display: block; animation: fade-in 1s; } #wpforms-form-3342 .wpforms-conditional-hide { display: block; animation: fade-out 1s; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-out { from { opacity: 1; } to { opacity: 0; } } ``` CSSでは、フォームID **3342** をターゲットにしています。このIDはご自身のフォームIDに合わせて更新する必要があります。フォームIDの見つけ方についてサポートが必要な場合は、[この役立つガイドをご覧ください](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "フォームIDとフィールドIDの特定方法")。 これで完了です！[税務申告クライアント受付フォームテンプレート](https://wpforms.com/templates/tax-preparation-client-intake-form-template/ "WPForms 税務申告クライアント受付フォームテンプレート")を使用して、アニメーション切り替えフォームを作成しました。フォーム送信時に紙吹雪アニメーションを追加したいですか？[確認メッセージに紙吹雪アニメーションを追加する方法](https://wpforms.com/developers/how-to-add-confetti-animation-to-confirmation-message/ "確認メッセージに紙吹雪アニメーションを追加する方法")のチュートリアルをご覧ください。 **カテゴリー:** チュートリアル **タグ:** CSS ---