css基础--过渡、动画

目录

过渡

过渡属性

transition与transform异同

动画

@keyframes规则

动画属性


过渡

        css过渡可以在给定的时间内平滑地改变属性值

过渡属性

transition-property属性

        作用:设置对象中参与过渡的属性

transition-property: all(默认)|none|<property>;
    transition-property: all;(默认)
    transition-property: none;
    transition-property:color,background-color,border-color;

        all(默认):css属性均可以进行过渡

        none:不指定过渡效果

        <property>:指定需要进行过渡的css属性,列表以逗号进行分隔;

transition-duration属性

        作用:设置过渡持续时间,默认0(以s或ms计)

transition-duration:time;(s/ms)

transition-timing-function属性

        作用:设置过渡动画类型

transition-timing-function: ease|linear|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

        ease(默认):平滑过渡。(=cubic-bezier(0.25,0.1,0.25,1))

        linear:线性过渡。(=cubic-bezier(0,0,1,1))

        ease-in:由慢到快。(=cubic-bezier(0.42,0,1,1))

        ease-out:由快到慢。(=cubic-bezier(0,0,0.58,1))

        ease-in-out:慢-快-慢。(=cubic-bezier(0.42,0.1,0.58,1))

        cubic-bezier(n,n,n,n):特定的贝塞尔曲线类型,4个数值需在[0,1]区间

transition-timing-delay属性

        作用:过渡延迟时间,默认0(以s或ms计)

transition-delay:time;

transition属性

        作用:简写,综合设置多个属性

transition:property duration timing-function delay;

transition与transform异同

transition是过渡属性,transform是2d/3d转换属性

相同点:

        1.两者一般都会设置触发条件,例如设置伪类:hover等

        2.均不会对其他元素布局产生影响

不同点:

        1.transition过渡效果可以设置过渡时间、延迟、曲线等;transform变形是瞬间完成的变化,不能设置这些效果

        2.transition过渡默认是对象左上角,不能改变;transform变形能设置对象中心点

        3.transition过渡是针对元素属性进行改变;transform变形是针对整个元素进行改变

动画

@keyframes规则

        作用:创建动画,指定一个css样式和动画逐步从目前样式更改为新样式

        注:要使动画生效,必须将动画绑定到某个元素。并且必须定义动画名称和持续时间,若省略持续时间,由于默认值为0,动画将无法运行。

       动画变化时间设置:百分比、from、to[使用关键词"from"或"to",等同于0%(动画开始)和100%(动画完成)]

        示例:

<style>
    /* 改变div背景色并且移动 */
    @keyframes name{
        0%  {transform:translate(0px); background-color: blueviolet;}
        25% {transform:translate(15px); background-color:brown;}
        50% {transform:translate(30px); background-color:burlywood;}
        75% {transform:translate(45px); background-color:cadetblue;}
        100%{transform:translate(60px); background-color:chartreuse;}
    }
    .name{
        width: 150px;
        transform: translate(30px);
        animation: name 2s linear;
    }  
</style>
<body>
    <div class="name">content</div>
</body>

动画属性

animation-name:设置对象应用动画名称,与@keyframes配合使用

animation-name:none(默认)|keyframename;

animation-duration:设置对象持续时间,默认值为0(以s或ms计)

animation-duration:time;

animation-timing-function:设置对象动画过渡类型

animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out
                          |steps(int,start|end)|cubic-bezier(n,n,n,n);

        ease(默认):平滑过渡。(=cubic-bezier(0.25,0.1,0.25,1))

        linear:线性过渡。(=cubic-bezier(0,0,1,1))

        ease-in:由慢到快。(=cubic-bezier(0.42,0,1,1))

        ease-out:由快到慢。(=cubic-bezier(0,0,0.58,1))

        ease-in-out:慢-快-慢。(=cubic-bezier(0.42,0.1,0.58,1))

        cubic-bezier(n,n,n,n):特定的贝塞尔曲线类型,4个数值需在[0,1]区间

animation-delay:设置对象动画延迟时间,默认值为0(以s或ms计)

注:允许负值,-3s使动画马上开始,但跳过3s进入动画

animation-delay:time;

animation-iteration-count:设置对象循环次数,默认1

animation-iteration-count:n|infinite;

        n:数字,设置循环动画次数,默认1

        infinite: 设置动画无限循环

animation-direction:设置对象在循环中运动方向

animation-direction:normal|reverse|alternate|alternate-reverse;

        normal(默认):动画正常正向播放

        reverse:动画反向播放

        alternate:动画奇数次正向播放,偶数次反向播放

        alternate-reverse:动画奇数次反向播放,偶数次正向播放

animation-fill-mode:设置动画不播放时,要应用到元素的样式

animation-fill-mode:none|forwards|backwards|both;

        none(默认):不设置动画之外的状态

        forwards:设置对象状态为动画结束时的状态

        backwards:设置对象状态为动画开始时的状态

        both: 设置对象状态为动画结束或开始时的状态

animation-play-state:设置动画状态

animation-play-state:paused|running;

        running(默认):动画运行

        paused:动画暂停

animation:复合属性,综合设置多个属性,默认值:none 0 ease 0 1 normal

animation:name duration timing-function delay iteration-count direction fill-mode play-style;
上一篇:过渡transition、opacity的兼容性


下一篇:“21天好习惯”第一期-4