つべアンケ　 アニメーションする拡張デザイン

tubeenquete_animation_theme.md

これは何

• YouTube配信者向けChrome拡張機能「つべアンケ」のアニメーションするデザイン拡張です。
• ご本家様

誰が使っていいの

• ご自由に。これを元にした改変もOKです。
• 使用報告は必須ではありませんが、本デザインの作者に連絡頂けると次回作作る励みになるかもです。

使い方

• 拡張機能「つべアンケ」をインストール
• このgistをDLする
• 自分で現在開催しているYouTUbeのライブ配信画面を開き、「アンケート機能を使う」を押す
• 「外部CSSを読み込む」横のファイル選択ボタンから好きな方のCSSを読み込ませる
• あとは公式の操作方法に従って下さい

内容物

• tubeenquete_animation_theme01.css
  • 隅で三角が外側に動く
  • 
• tubeenquete_animation_theme02.css
  • 隅で四角が伸びたり縮んだりする
  • 

tubeenquete_animation_theme01.css

@keyframes questionnaire_animation-upperright {
    0%, 75%, 100%{
        top: 0;
        right: 0;
    }
    25% {
        top: -5px;
        right: -5px;
    }
}

@keyframes questionnaire_animation-bottomleft {
    0%, 75%, 100%{
        bottom: 0;
        left: 0;
    }
    25% {
        bottom: -5px;
        left: -5px;
    }
}

/* グリーンバック */
body {
    background-color: lime;
}
.questionnaire__result {
    text-align: left;
    margin-top: 20px;
    width : 80%;
}
.questionnaire__result-window {
    text-align: center;
    width: 100%;
    min-height: 300px;
    padding: 10px;
}

/* 画面上部のアンケートタイトル部分 */
.questionnaire__result-title {
    font-size: 1.75em;
    width: 100%;
    padding: 30px;
    color: #fff;
    text-align: center;
    background: rgb(59, 59, 59);
}

/* アンケート項目text部分 */
.questionnaire__result-text {
    font-size: 1.5em;
}

/* アンケートの枠デザイン */
.questionnaire__result-item {
    display: inline-block;
    position: relative;
    width: 350px;
    vertical-align: top;
    padding: 25px;
    overflow-wrap: break-word;
    color: #fff;
    background: #313a62;
    margin: 10px 15px;
    text-align: center;
}

.questionnaire__result-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    border-top: 20px solid #F0897F;
    border-right: 50px solid #f6da69;
    border-bottom: 20px solid transparent;
    border-left: 50px solid transparent;
    animation-name: questionnaire_animation-upperright;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

.questionnaire__result-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    border-top: 20px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 20px solid #F0897F;
    border-left: 50px solid #f6da69;
    animation-name: questionnaire_animation-bottomleft;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

/* パーセンテージ(黄色)の部分 */
.questionnaire__result-percentage {
    color: #fff;
    font-weight: bold;
    font-size: 1.75em;
}

tubeenquete_animation_theme02.css

@keyframes questionnaire_animation-upperright {
    0%, 25%, 100% {
        height: 40px;
        box-shadow: -40px 0 #f6da69, -80px 0 #ffffff;
    }
    75% {
        height: 40px;
        box-shadow: -40px -20px #f6da69, -80px -30px #ffffff;
    }
}

@keyframes questionnaire_animation-bottomleft {
    0%, 25%, 100% {
        height:40px;
        box-shadow: 40px 0 #f6da69, 80px 0 #ffffff;
    }
    75% {
        height:40px;
        box-shadow: 40px 20px #f6da69, 80px 30px #ffffff;
    }
}

/* グリーンバック */
body {
    background-color: lime;
}
.questionnaire__result {
    text-align: left;
    margin-top: 20px;
    width : 80%;
}
.questionnaire__result-window {
    text-align: center;
    width: 100%;
    min-height: 300px;
    padding: 10px;
}

/* 画面上部のアンケートタイトル部分 */
.questionnaire__result-title {
    font-size: 1.75em;
    width: 100%;
    padding: 30px;
    color: #fff;
    text-align: center;
    background: rgb(59, 59, 59);
}

/* アンケート項目text部分 */
.questionnaire__result-text {
    font-size: 1.5em;
}

/* アンケートの枠デザイン */
.questionnaire__result-item {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 350px;
    vertical-align: top;
    padding: 25px;
    overflow-wrap: break-word;
    color: #fff;
    background: #313a62;
    margin: 10px 15px;
    text-align: center;
}

.questionnaire__result-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    width: 30px;
    height: 40px;
    background-color: #F0897F;
    box-shadow: -40px 0 #f6da69, -80px 0 #ffffff;
    animation-name: questionnaire_animation-upperright;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

.questionnaire__result-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 30px;
    height: 40px;
    background-color: #F0897F;
    box-shadow: 40px 0 #f6da69, 80px 0 #ffffff;
    animation-name: questionnaire_animation-bottomleft;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    animation-iteration-count: infinite;
}

/* パーセンテージ(黄色)の部分 */
.questionnaire__result-percentage {
    color: #fff;
    font-weight: bold;
    font-size: 1.75em;
}