css动画/过渡 部分学习要点

1.animation:闪光的书

 .book {
        animation: booklight 1.5s infinite linear;//infinite表示一直循环播放动画
        @keyframes booklight {//自定义名字为booklight
            0% {
                opacity: 1;
            }
            50% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
    }

2.transition:过渡效果

 .fadein-enter-active,
    .fadein-leave-active {//过渡变换条件
        transition: all 2s ease;
    }
    .fadein-enter,
    .fadein-leave-active {//开始前状态、结束状态
        opacity: 0;
        transform: translate(0.2rem, 1rem);
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文并非原创,属于摘抄性质,并有个人的加工。 一、过渡动画 过渡(transition)动画,就是从初始状态过渡到...
    前端xiyoki阅读 11,740评论 1 13
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,349评论 0 11
  • transitiontransition-property 过渡属性transition-duration 过渡持...
    Rella7阅读 451评论 0 0
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 1,898评论 0 4
  • css3动画 过渡:transition 2D 转换 transform 3D 转换 transform 动画:a...
    刘松阳阅读 788评论 0 0