星空网 > 软件开发 > 网页设计

animation与transition

animation

动画,无法直接决定开始时间

demo1
 1 @-webkit-keyframes demo-animation1{ 2     0% { 3       -webkit-transform:translate3d(0,0,0); 4       transform:translate3d(0,0,0); 5     } 6     100% { 7       -webkit-transform:translate3d(10px,0,0); 8       transform:translate3d(10px,0,0); 9     }10   }11   @keyframes demo-animation1{12     0% {13       -webkit-transform:translate3d(0,0,0);14       transform:translate3d(0,0,0);15     }16     100% {17       -webkit-transform:translate3d(10px,0,0);18       transform:translate3d(10px,0,0);19     }20   }21   .demo1{22     -webkit-animation-name:demo-animation1;23     animation-name:demo-animation1;24     -webkit-animation-duration:.5s;25     animation-duration:.5s;26     animation-iteration-count: infinite;27     -webkit-animation-iteration-count: infinite;28     /*-webkit-animation-fill-mode: both;29     animation-fill-mode: both;*/30     animation-direction: alternate;31     -webkit-animation-direction: alternate;32   }

transition

变化,可以直接通过hover状态来设置开始时间

demo2
 1 .demo2:hover{ 2   -webkit-transform:translate3d(10px,0,0); 3   transform:translate3d(10px,0,0); 4   } 5   .demo2{ 6   -webkit-transform:translate3d(0,0,0); 7   transform:translate3d(0,0,0); 8   -webkit-transition:transform .5s; 9   transition:transform .5s;10   }




原标题:animation与transition

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

2.1类危险品南沙港出口报关海运代理:https://www.goluckyvip.com/news/6202.html
2022年一定要布局东南亚本地店!lazada本地店怎么开通? :https://www.goluckyvip.com/news/6203.html
eBay卖家怎么设置运费 设置eBay运费流程是什么 :https://www.goluckyvip.com/news/6204.html
Lazada选品:2月份后泰国市场哪些商品热卖:https://www.goluckyvip.com/news/6205.html
美国海外仓一件代发哪家好?美新物流美国仓好吗?:https://www.goluckyvip.com/news/6206.html
俄罗斯OZON注册后仓库设置操作说明(最新):https://www.goluckyvip.com/news/6207.html
Lazada为优化购物体验,升级买家取消订单政策:https://www.kjdsnews.com/a/1836358.html
Lazada为优化购物体验,升级买家取消订单政策:https://www.goluckyvip.com/news/186219.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流