CSS3 @keyframes 語法
http://www.w3chtml.com/css3/rules/@keyframes.htmlcss
<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf-8" /><title>@keyframes_CSS參考手冊_web前端開發參考手冊系列</title><style>#sport{position:relative;width:500px;height:400px;border:1px solid #ddd;}#staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20; -moz-animation:staff 3s linear; -webkit-animation:staff 3s linear; -o-animation:staff 3s linear; -ms-animation:staff 3s linear; animation:staff 3s linear;}#ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E);line-height:20; -moz-animation:ball 3s linear; -webkit-animation:ball 3s linear; -o-animation:ball 3s linear; -ms-animation:ball 3s linear; animation:ball 3s linear;}@-moz-keyframes ball{ 0%{-moz-transform:translate(0,0);} 5%{-moz-transform:translate(-90px,-100px);} 18%{-moz-transform:translate(0,-350px);} 35%{-moz-transform:translate(200px,0);} 46%{-moz-transform:translate(380px,-160px);} 60%{-moz-transform:translate(250px,-350px);} 78%{-moz-transform:translate(60px,0);} 100%{-moz-transform:translate(0,0);}}@-webkit-keyframes ball{ 0%{-webkit-transform:translate(0,0);} 5%{-webkit-transform:translate(-90px,-100px);} 18%{-webkit-transform:translate(0,-350px);} 35%{-webkit-transform:translate(200px,0);} 46%{-webkit-transform:translate(380px,-160px);} 60%{-webkit-transform:translate(250px,-350px);} 78%{-webkit-transform:translate(60px,0);} 100%{-webkit-transform:translate(0,0);}}@-o-keyframes ball{ 0%{-o-transform:translate(0,0);} 5%{-o-transform:translate(-90px,-100px);} 18%{-o-transform:translate(0,-350px);} 35%{-o-transform:translate(200px,0);} 46%{-o-transform:translate(380px,-160px);} 60%{-o-transform:translate(250px,-350px);} 78%{-o-transform:translate(60px,0);} 100%{-o-transform:translate(0,0);}}@-ms-keyframes ball{ 0%{-ms-transform:translate(0,0);} 5%{-ms-transform:translate(-90px,-100px);} 18%{-ms-transform:translate(0,-350px);} 35%{-ms-transform:translate(200px,0);} 46%{-ms-transform:translate(380px,-160px);} 60%{-ms-transform:translate(250px,-350px);} 78%{-ms-transform:translate(60px,0);} 100%{-ms-transform:translate(0,0);}}@keyframes ball{ 0%{transform:translate(0,0);} 5%{transform:translate(-90px,-100px);} 18%{transform:translate(0,-350px);} 35%{transform:translate(200px,0);} 46%{transform:translate(380px,-160px);} 60%{transform:translate(250px,-350px);} 78%{transform:translate(60px,0);} 100%{transform:translate(0,0);}}@-moz-keyframes staff{ 0%{-moz-transform:translate(0,0);} 6%{-moz-transform:translate(260px,0);} 20%{-moz-transform:translate(300px,0);} 30%{-moz-transform:translate(300px,0);} 40%{-moz-transform:translate(200px,0);} 65%{-moz-transform:translate(40px,0);} 79%{-moz-transform:translate(0,0);} 100%{-moz-transform:translate(0,0);}}@-webkit-keyframes staff{ 0%{-webkit-transform:translate(0,0);} 6%{-webkit-transform:translate(260px,0);} 20%{-webkit-transform:translate(300px,0);} 30%{-webkit-transform:translate(300px,0);} 40%{-webkit-transform:translate(200px,0);} 65%{-webkit-transform:translate(40px,0);} 79%{-webkit-transform:translate(0,0);} 100%{-webkit-transform:translate(0,0);}}@-o-keyframes staff{ 0%{-o-transform:translate(0,0);} 6%{-o-transform:translate(260px,0);} 20%{-o-transform:translate(300px,0);} 30%{-o-transform:translate(300px,0);} 40%{-o-transform:translate(200px,0);} 65%{-o-transform:translate(40px,0);} 79%{-o-transform:translate(0,0);} 100%{-o-transform:translate(0,0);}}@-ms-keyframes staff{ 0%{-ms-transform:translate(0,0);} 6%{-ms-transform:translate(260px,0);} 20%{-ms-transform:translate(300px,0);} 30%{-ms-transform:translate(300px,0);} 40%{-ms-transform:translate(200px,0);} 65%{-ms-transform:translate(40px,0);} 79%{-ms-transform:translate(0,0);} 100%{-ms-transform:translate(0,0);}}@keyframes staff{ 0%{transform:translate(0,0);} 6%{transform:translate(260px,0);} 20%{transform:translate(300px,0);} 30%{transform:translate(300px,0);} 40%{transform:translate(200px,0);} 65%{transform:translate(40px,0);} 79%{transform:translate(0,0);} 100%{transform:translate(0,0);}}</style></head><body><div id="sport"> <span id="ball">彈球</span> <span id="staff">滑桿</span></div></body></html>
相關文章
- 1. css3中的 @Keyframes
- 2. CSS3 @keyframes animate
- 3. 【css3】CSS3動畫（animation @keyframes）
- 4. CSS3 @keyframes 規則（1）
- 5. CSS3 動畫關鍵幀 @keyframes
- 6. css3動畫（@keyframes和animation的用法）
- 7. @-webkit-keyframes myfirst 動畫 css3
- 8. CSS3語法總結
- 9. 詳解css3系列：動畫@keyframes和Animation
- 10. 移動端banner css3(@keyframes )實現
- 更多相關文章...
- • SQLite 語法 - SQLite教程
- • PHP 語法 - PHP教程
- • Kotlin學習（一）基本語法
- • 算法總結-回溯法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安裝cuda+cuDNN
- 2. GitHub的使用說明
- 3. phpDocumentor使用教程【安裝PHPDocumentor】
- 4. yarn run build報錯Component is not found in path 「npm/taro-ui/dist/weapp/components/rate/index「
- 5. 精講Haproxy搭建Web集羣
- 6. 安全測試基礎之MySQL
- 7. C/C++編程筆記：C語言中的複雜聲明分析，用實例帶你完全讀懂
- 8. Python3教程(1)----搭建Python環境
- 9. 李宏毅機器學習課程筆記2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里雲ECS配置速記
歡迎關注本站公眾號,獲取更多信息
相關文章