css 过渡和动画

最新推荐文章于 2023-06-23 11:25:50 发布

余生再见

最新推荐文章于 2023-06-23 11:25:50 发布

阅读量186

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/hewindows/article/details/103151032

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

过渡
1、什么是过渡
使得CSS的属性值在一段时间内平滑过渡
2、过渡的 4个要素(属性)
1、指定过渡属性
属性：transition-property
作用：规定应用过渡效果的CSS属性名称
取值：
1、none
2、all
3、property-name : 具体使用过渡效果的属性名称
可以设置过渡的属性：
1、颜色属性
2、取值为数值的属性
3、转换属性
transform
4、渐变属性
5、visibility 属性
6、阴影属性

ex:
				div{
					transition-property:background;
				}

2、指定过渡时间
属性：transition-duration
取值：以秒(s) 或毫秒(ms) 作为单位的
默认值为0，即没有过渡效果

ex:
				div{
					transition-property:background;
					transition-duration:300ms;
				}

3、指定速度时间曲线函数
属性：transition-timing-function
取值：
1、ease : 默认值，慢速开始，快速变快，慢速结束
2、linear : 匀速
3、ease-in : 慢速开始，加速结束
4、ease-out: 快速开始，减速结束
5、ease-in-out:慢速开始和结束，中间先加后减

ex:
				div{
					transition-property:background;
					transition-duration:300ms;
					transition-timing-function:linear;
				}

4、指定过渡延迟时间
属性：transition-delay
取值：ms 或 s 作为单位的数值
3、触发过渡效果
一般都是由用户行为触发
5、过渡属性-过渡子属性的简写模式
transition:property duration timing-function delay;
动画
1、什么是动画
使元素从一种样式逐渐变化为另一种样式
其原理是通过关键帧控制动画的每一步

注意：浏览器兼容性
通过了浏览器前缀解决兼容性
-moz-
-webkit-
-o-
2、使用动画的步骤
1、声明动画
声明动画的名称，并且指定关键帧的信息
关键帧：
1、时间点
2、该时间点上的状态(样式)
2、使用动画
通过动画属性，将动画效果绑定到某个元素上
3、声明动画
语法
@keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
… …(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}

兼容 Chrome Safari
@-webkit-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
… …(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}

兼容 Firefox
@-moz-keyframes 动画名称{
0%{
动画开始时元素的样式声明
}
… …(1% ~ 99%)
100%{
动画结束时元素的样式声明
}
}

时间点：
0%(from) : 动画开始的时候
50% : 动画运行到一半的时候
100%(to) : 动画结束的时候
4、动画的调用
1、animation-name
要调用的动画名称
2、aniamtion-duration
动画完成一个周期需要用的时间
以s 或 ms 为单位
3、animation-timing-function
动画的速度时间曲线函数
ease
linear
ease-in
ease-out
ease-in-out
4、animation-delay
动画执行延迟时间
s|ms为单位
5、animation-iteration-count
动画播放次数
取值：
1、具体数值
2、infinite
无限次播放
6、animation-direction
动画播放方向
取值：
1、normal
默认值，正向播放，即从 0%~100%
2、reverse
逆向播放，即从100% ~ 0%
3、alternate
轮流播放，动画在奇数次数播放时，从 0% ~ 100%,动画在偶数次数播放时，从100% ~ 0%
7、animation属性
animation:name duration timing-function delay iteration-count direction;
8、animation-fill-mode
动画播放前后的填充方式
取值：
1、none
默认值，不改变默认行为
2、forwards
动画完成后，将保持在最后一个关键帧的状态上
3、backwards
动画播放前(在延迟时间内)，将元素保持在第一个帧的状态上
4、both
动画播放前后的填充模式都应用
9、animation-play-state
动画的播放状态
取值：
1、paused
暂停
2、running
播放

//html
<body>
    <div class="btnDiv">
        <button class="openPopUpBtn" id="openBtn">弹窗</button>     
    </div>

    <div class="popUp">
        <p>我是弹窗内容</p>
        <button class="closePopUpBtn" id="closeBtn">关闭</button>
    </div>
</body>


    .btnDiv{
        text-align: center;
    }
    .openPopUpBtn,.closePopUpBtn{
        width:60px;
        height:40px;
        line-height:40px;
        border:1px solid #c9c9c9;
        background-color: #FFF;
        box-shadow: 1px 1px 1px 1px #eee;
    }
    .openPopUpBtn{
        margin-top:50px;
    }
    .openPopUpBtn:hover,.closePopUpBtn:hover{
        background-color: #eee;
        cursor:pointer;
    }

    
    .popUp{
        width:600px;
        height:500px;
        text-align: center;
        background-color: #FFFeee;
        border:1px solid #ccc;
        box-shadow: 1px 1px 1px 1px #eee;            
        position:absolute;
        left:50%;
        margin-left:-300px;
        opacity: 0; 
    }

    .closePopUpBtn{
        position: absolute;
        bottom:20px;
        left:50%;
        transform:translate(-50%);
    }

余生再见

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css 过渡和动画

过渡1、什么是过渡使得CSS的属性值在一段时间内平滑过渡2、过渡的 4个要素(属性)1、指定过渡属性属性：transition-property作用：规定应用过渡效果的CSS属性名称取值：1、none2、all3、property-name : 具体使用过渡效果的属性名称可以设置过渡的属性：1、颜色属性2、取值为数值的属性3、转换属性transform4、渐变属性...
复制链接

扫一扫