スポンサーサイト

2014.01.27 Monday

一定期間更新がないため広告を表示しています

  • -
  • -
  • -

prefix

without prefix


div.css-testbox {
    margin: 10px auto;
    width: 300px;
    height: 300px;
    border: solid 1px #cdcdcd;
}
div.box-prefix {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    -webkit-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
    -moz-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
    -o-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
    -ms-box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
}
div.box-without-prefix {
    border-radius: 10px;
    box-shadow: 0px 0px 5px 3px rgba(0,0,0,.2);
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}
@-moz-keyframes rotate {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg)
    }
}
@-o-keyframes rotate {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(360deg)
    }
}
@-ms-keyframes rotate {
    0% {
        -ms-transform: rotate(0deg);
    }
    100% {
        -ms-transform: rotate(360deg)
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg)
    }
}
/*
    animation-name: ;keyframeの名前
    animation-duration: ;実行時間(1000sm>1s>1秒)
    animation-timing-function: ;easing
    animation-delay: ;開始時間(1000sm>1s>1秒)
    animation-iteration-count: ;実行回数(infinite>無限)
    aniamation-direction: ;反転再生(normal,alternate)
*/
.animation-prefix {
    -webkit-animation: rotate 5s ease-in-out infinite;
    -moz-aniamation: rotate 5s ease-in-out infinite;
    -o-animation: rotate 5s ease-in-out infinite;
    -ms-animation: rotate 5s ease-in-out infinite;
}
.animation-without-prefix {
    animation: rotate 5s ease-in-out infinite;
}
/*
    transition-property: ;cssプロパティ名(all,none,プロパティ名)
    transition-duration: ;実行時間(1000sm>1s>1秒)
    transition-timing-function: ;easing
    transition-delay: ;開始時間(1000sm>1s>1秒)
*/
.transition-prefix {
    width: 100%;
    height: 100%;
    -webkit-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
    -moz-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
    -o-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
    -ms-transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
}
.transition-without-prefix {
    transition: width 500ms ease-in-out 0, height 1s ease-in-out 0;
}
.transition-prefix:hover { width: 80%; height: 80%; } .transition-without-prefix:hover { width: 80%; height: 80%; }
いつも思い出せないcss3 animationとtransitionとプレフィックスのメモ。

マウスオーバーかタッチでtransitionを実行。

プレフィックスがあると適用されないプロパティもある。

当然ないと適用されないプロパティが沢山

やっぱし併記が必要。

早くプレフィックス無しで動いて欲しいな。


スポンサーサイト

2014.01.27 Monday

  • -
  • -
  • -

コメント
コメントする








   
この記事のトラックバックURL
トラックバック

calendar

S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
<< July 2017 >>

profile

last entry:2013/06/10

selected entries

categories

archives

recent comment

search this site.

others