美文网首页网页前端后台技巧(CSS+HTML)
CSS animation 动画执行结束保留结束状态

CSS animation 动画执行结束保留结束状态

作者: GloryMan | 来源:发表于2019-12-30 15:04 被阅读0次

实例:一个箭头默认向下,点击展开之后箭头向上

animation.gif

animation: rotate .25s linear 1 alternate forwards;

意思为 name、时间、动画的速度曲线、动画执行次数、如何循环、动画之前或之后的效果

    /* 显示的时候动画效果 */
    .animation {
        animation: rotate .25s linear 1 alternate forwards;
    }
 /*隐藏时候动画效果 */
    .animation1 {
        animation: rotate1 .25s linear 1 alternate forwards;
    }

    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(180deg);
        }
    }
    @keyframes rotate1 {
        0% {
            transform: rotate(180deg);
            
        }
        100% {
            transform: rotate(0deg);
        }
    }

相关文章

  • CSS animation 动画执行结束保留结束状态

    实例:一个箭头默认向下,点击展开之后箭头向上 animation: rotate .25s linear 1 al...

  • animation动画结束后css样式怎么保留最后状态

    本文来源于 CSS animation动画之animation-fill-mode特性 问题 css属性anima...

  • 变形

    CSS transform变换 CSS animation动画 -linear 匀速-ease 开始和结束慢速-e...

  • 12-CSS3-动画模块

    动画第一种写法 动画第二种写法 动画状态1.等待状态2.执行状态3.结束状态 animation-fill-mod...

  • CSS动画

    animation动画 动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态 infinite不限...

  • CSS动画

    animation动画 动画名称、时间、曲线、延迟、播放次数、结束后是否返回、动画前后的状态infinite不限制...

  • 【前端】-020-页面制作-CSS-动画

    Animation 动态展现CSS样式的变化。 动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中...

  • CAAnimation的一些坑记录

    关于CAAnimation结束后的隐式还原动画 我们经常用以下两行代码来设置animation结束后的状态保持结束...

  • CSS-3D知识

    1.CSS动画 1.1 CSS动画属性-animation animation:为CSS动画属性,使用该属性可以替...

  • animation-direction

    animation-direction等于normal。动画循环播放时,每次都是从结束状态跳回到起始状态,再开始播...

网友评论

    本文标题:CSS animation 动画执行结束保留结束状态

    本文链接:https://www.haomeiwen.com/subject/vwcmoctx.html