css动画

最新推荐文章于 2024-07-29 14:14:21 发布

lyx2

最新推荐文章于 2024-07-29 14:14:21 发布

阅读量242

点赞数

文章标签：教程学习 css 动画

本文链接：https://blog.csdn.net/lyx2049/article/details/78245038

版权

css动画主要依赖两个属性：animation和keyframes。

animation用于指定动画的总体属性，特别是指定名字供keyframes使用。

animation: name duration timing-function delay iteration-count direction;
animation-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)
animation-iteration-count: n|infinite; /*播放次数*/
animation-direction: normal|alternate; /*是否轮流反向播放动画*/

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

实例

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;
}