CSS3之animation、transition

最新推荐文章于 2023-10-07 17:44:46 发布

cod16xx

最新推荐文章于 2023-10-07 17:44:46 发布

阅读量1.1k

点赞数

分类专栏： css3 html 文章标签： css3

本文链接：https://blog.csdn.net/qq_35037977/article/details/70036671

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

w3c详细animation资料

主要查阅这里，下面是最主要属性

animation 属性是一个简写属性，用于设置六个动画属性：

animation: name duration timing-function delay iteration-count direction;

animation-name 绑定到选择器的@keyframes的名字
animation-duration 动画的总时长，必须设置，否则为0无法播放
animation-timing-function 动画的速度曲线
animation-delay 延迟执行动画
animation-iteration-count 执行次数
animation-direction 是否在下一周期逆向地播放。

简单例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tr</title>
    <style>
div{
    width:100px;
    height:100px;
    border: 3px solid black;
    animation: mymove 1s infinite 1s;
}
@keyframes mymove{
    from{width:0px;}
    to{width:100px;}
}
/*
@keyframes mymove{
    0% {width:0px; height:0;}
    50% {width:50px; height:50px;}
    100% {width:100px; height:100px;}
}
*/

    </style>
</head>
<body>
<div></div>   
</body>
</html>

transition详细w3c资料

主要查阅这里，下面是最主要属性

transition为元素从一种样式变换为另一种样式时添加效果

transition 属性是一个简写属性，用于设置四个过渡属性：

transition: property duration timing-function delay;

transition-property 改变的属性
transition-duration 过渡时长
transition-timing-function 速率曲线
transition-delay 延迟执行

简单例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tr</title>
    <style>
div{
    width:100px;
    height:100px;
    transition: width 1s linear,height 1s linear;
    border: 3px solid black;
}
div:hover{
    width:200px;
    height:300px;
}
    </style>
</head>
<body>
<div></div>    
</body>
</html>

触发hover事件时，会按照 transition中的规则进行样式的改变。

cod16xx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3之animation、transition

w3c详细animation资料主要查阅这里，下面是最主要属性animation 属性是一个简写属性，用于设置六个动画属性：animation: name duration timing-function delay iteration-count direction;animation-name 绑定到选择器的@keyframes的名字 animation-duration 动画的总时长
复制链接

扫一扫

专栏目录