爱站程序员基地效果图:
右边是动画,左边是过渡,过渡需要提前设置好过渡的样式,时间,速率等等属性
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>2D的过渡</title><script src=\"http://libs.baidu.com/jquery/2.1.4/jquery.min.js\"></script><style>html {height: 100%;}body {margin: 0;height: 100%;background-color: black;}section:nth-child(1) {/* from 设置容器过渡的初始状态*/width: 100px;height: 100px;border-radius: 50%;background-color: yellow;margin-top: 50px;/*让圆下降*//*transition过渡，是2D动画中的一个复合属性，包括transition-property（属性），transition-timing-function（动画执行的速率），transition-duration（动画执行的时间\\间隔\\周期,以秒s为单位），transition-delay（动画延迟的时间,以秒s为单位）*//*transition-property过渡属性，填写即将要做样式转换的属性，高度、颜色、距离等等*/transition-property: background-color, margin-top, width, height;/*通过all来代表所有属性都可以执行过渡效果*/transition-property: all;/*动画开始到动画结束间隔3s*/transition-duration: 5s;/*动画执行后延迟1s才开始动画，动画结束后也会延迟1秒回到原状态*/transition-delay: 1s;/*速率：linear匀速*/transition-timing-function: linear;}/*当鼠标长按容器时，使得容器处于活跃状态下，就会执行以下样式*/section:nth-child(1):active {/*to 过渡的结束状态*/background-color: orangered;margin-top: 500px;width: 50px;height: 50px;}/*第二个容器：位于右侧、设置宽高、背景颜色*/section:nth-child(2) {width: 100px;height: 100px;background-color: rosybrown;/*定位*/position: absolute;top: 50px;right: 50px;/*动画animation*//*1动画的名字*/animation-name: DownDown;/*2动画的时间*/animation-duration: 3s;/*3动画速率 默认ease慢-块-慢 linear匀速*/animation-timing-function: linear;/*4动画次数 默认是1次 infinite 无限次数*/animation-iteration-count: infinite;/*5动画延迟 动画执行后延迟2s后才开始动画*//*animation-delay: 2s;*//*6设置动画的运动方向，alternate该属性让容器以动画的形式原路返回*/animation-direction: alternate;/*将5句话合成一句话*//*alternate动画交替，让动画原路返回*/animation: DownDown 3s linear infinite alternate;}/*执行动画规则@keyframes + 动画的名称 */@keyframes DownDown {from {/*动画的初始状态*/transform: translate(0, 0) scale(0);}to {/*动画的结束状态*/transform: translate(0, 500px) scale(0.5);}}</style></head><body><section class=\"aa\"></section><section></section><div style=\"text-align: center;\"><button class=\"btn\" onclick=\"my()\">点点</button></div></body><script>function my(){console.log(\'哈哈哈\');$(\'.aa\').css({\'background-color\': \'orangered\',\'margin-top\': \'500px\',\'width\': \'50px\',\'height\': \'50px\'})}</script></html>
如果文章对你有帮助,麻烦点个赞,谢谢~
