CSS3 @keyframes Rule
 完全な CSS3 リファレンス
例
Make a div element move gradually 200px down:
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
} |
Try it yourself »
|
ブラウザ・サポート
@keyframes rule is not supported in any browsers.
Safari and Chrome support an alternative, the @-webkit-keyframes rule.
定義と用法
With the @keyframes rule, you can create animations.
animation is created by gradually changing from one set
of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the change will happen in percent, or the keywords "from" and
"to", which is the same as 0% and 100%.
0% is the beginning of the animation, 100% is when the animation is complete.
For best browser support, you should always define both the 0% and the 100%
selectors.
注: Use the animation properties to control the appearance of the
animation, and also to bind the animation to selectors.
構文
| @keyframes { animationname keyframes-selector {css-styles;}
} |
| 値 |
説明 |
| animationname |
必須。Defines the name of the animation. |
| keyframes-selector |
必須。Percentage of the animation duration. Legal values: 0-100%
from (same as 0%)
to (same as 100%) 注: You can have many keyframes-selectors in one
animation. |
| css-styles |
必須。One or more legal CSS style properties |
 |
Try it Yourself - Examples |
例
Add many keyframe selectors in one animation:
@keyframes mymove
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /*Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
} |
Try it yourself »
|
例
Change many CSS styles in one animation:
@keyframes mymove
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /*Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
} |
Try it yourself »
|
例
Many keyframe selectors with many CSS styles:
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
} |
Try it yourself »
|
関連ページ
CSS3 チュートリアル: CSS3 Animations
完全な CSS3 リファレンス
|