CSS3之animation、transition

来源：互联网发布：域名备案需要哪些资料编辑：程序博客网时间：2024/05/22 08:56

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中的规则进行样式的改变。

0 0