CSS3动画属性animation的用法

发布时间:2020-06-05 15:57:48 作者:Leah
来源:亿速云 阅读:399

本文以CSS3的动画属性为例,为大家分析动画属性animation的使用方法,阅读完整文相信大家对CSS3动画属性animation的使用方法有了一定的认识。

animation动画

(1)@keyframes 定义关键帧动画
(2)animation-name 动画名称
(3)animation-duration 动画时间
(4)animation-timing-function 动画曲线linear(匀速)| ease(缓冲)| step(步数)
(5)animation-delay 动画延迟
(6)animation-iteration-count 动画播放次数n | infinite
(7)animation-direction 动画结束后是否反向还原 normal | alternate
(8)animation-play-state 动画状态 paused(停止)| running(运动)
(9)animation-fill-mode 动画前后的状态 none(缺省)| forward(结束时停留在最后一帧) | backwards(开始时停留在定义的开始帧)| both(前后都应用)
(10)animation:name duration timing-function delay iteration-count direction;同时设置多个属性

例子一:

<head>
<meta charset="utf-8">
<title>animation动画</title>
<style type="text/css">

@keyframes shrink{
from{

        width: 200px;
    }
    to{
        width: 600px;
    }
}
.box{
    width: 200px;
    height: 30px;
    background-color: yellow;
    animation: shrink 1s ease 0.2s infinite normal;

}
.box:hover{
    animation-play-state: paused;
}
</style>

</head>

<body>

<div class="box">

</div>

</body>

CSS3动画属性animation的用法

例子二:loading

<head>
<meta charset="utf-8">
<title>loading</title>
<style type="text/css">

@keyframes loading{
    from{
        transform: scale(1,1);
    }
    to{
        transform: scale(1,0.5);
    }
}
.box{
    width: 300px;
    height: 200px;
    border: 1px solid #000;
}
.box div{
    width: 30px;
    height: 100px;
    background-color: gold;
    margin: 15px;
    float: left;
    border-radius: 15px;
    animation: loading 500ms ease infinite alternate;

}
.box div:nth-child(1){                    /*CSS3新增选择器*/

    background-color: #3DE94C;

}
.box div:nth-child(2){

    background-color: #3DB0AB;
    animation-delay: 100ms;
}
.box div:nth-child(3){

    background-color: #969EF3;
    animation-delay: 200ms;
}
.box div:nth-child(4){

    background-color: #F488ED;
    animation-delay: 300ms;
}
.box div:nth-child(5){

    background-color: #ED4F52;
    animation-delay: 400ms;
}
</style>

</head>

<body>

<div class="box">
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <p>loading.........</p>
</div>

</body>

CSS3动画属性animation的用法

2.CSS3新增选择器

E:nth-child(n):匹配元素类型为E,且是父元素的第n个。

3.CSS3圆角、rgba

(1)圆角

设置某一个角的圆角,比如设置左上角的圆角:
border-top-left-radius:30px 60px;

同时设置四个角:
border-radius:20px 10px 30px 50px;

设置四个圆角相同:
border-radius:50%;

4.rgba(新的颜色值表示法)

(1)盒子透明表示法:

.box{
width: 300px;
height: 300px;
background-color: #000000;
margin: 50px auto;

/*透明完整写法,整个盒子透明*/
    opacity: 0.3;
    filter: alpha(opacity=30);
}
.box01{
    width: 300px;
    height: 300px;
    /*第二种写法,仅背景透明*/
    background-color: rgba(0,0,0,0.5);
    margin: 50px auto;

    /*透明完整写法*/
    /*opacity: 0.3;
    filter: alpha(opacity=30);*/
}

上文描述的就是CSS3动画属性animation的用法,具体使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多相关内容,欢迎关注亿速云行业资讯频道! 

推荐阅读:
  1. 如何使用animation-fill-mode属性
  2. animation-direction属性如何使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

animation css3

上一篇:MySQL与Oracle在SQL语句写法上有哪些差异

下一篇:css中有几种方法可以实现水平垂直居中

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》