如何在没有任何悬停的情况下运行css转换动画
How to run css transform animations without any hover?
我想在一秒钟内让svg在侧面生长。我有这个代码
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<script src="js/plugin/jquery-2.1.4.min.js"></script>
<style>
/* Shorthand version */
.hub-icon-container svg {
position: relative;
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.hub-icon-container svg:hover {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<a href="javascript:void(0)" class="hub-icon-container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="70px" height="70px" viewBox="0 0 70 70" enable-background="new 0 0 70 70" xml:space="preserve">
<g class="hub-icon">
<path fill="#9B59B6" d="M64.142 23.032L35.001 34.998l14.533 6.271 18.908-7.766c0.689-0.285 1.026-1.087 0.744-1.782l-3.265-7.946C65.635 23.079 64.835 22.747 64.142 23.032z"/>
<path fill="#F74ED7" d="M64.068 47.142L35.001 34.998l5.845 14.712 18.861 7.876c0.688 0.29 1.495-0.04 1.783-0.73l3.312-7.931C65.09 48.233 64.763 47.431 64.068 47.142z"/>
<path fill="#F2C40D" d="M46.97 64.138l-11.97-29.14 -6.268 14.534L36.5 68.44c0.284 0.689 1.084 1.026 1.779 0.743l7.946-3.265C46.919 65.634 47.256 64.833 46.97 64.138z"/>
<path fill="#E67E22" d="M22.863 64.069l12.138-29.071 -14.707 5.846 -7.877 18.859c-0.292 0.692 0.039 1.497 0.731 1.784l7.93 3.311C21.771 65.089 22.573 64.76 22.863 64.069z"/>
<path fill="#E74C3C" d="M5.865 46.966l29.136-11.968 -14.531-6.267L1.562 36.498c-0.693 0.285-1.028 1.089-0.741 1.78l3.263 7.947C4.369 46.919 5.168 47.254 5.865 46.966z"/>
<path fill="#19BC9C" d="M5.935 22.858l29.065 12.14 -5.839-14.707 -18.863-7.876c-0.693-0.29-1.495 0.039-1.785 0.73l-3.311 7.931C4.914 21.768 5.241 22.57 5.935 22.858z"/>
<path fill="#2ECC71" d="M23.032 5.862l11.969 29.136 6.269-14.528L33.506 1.563c-0.286-0.697-1.089-1.03-1.783-0.746l-7.944 3.268C23.084 4.366 22.75 5.168 23.032 5.862z"/>
<path fill="#3398DB" d="M47.142 5.934L35.001 34.998l14.707-5.841L57.589 10.3c0.286-0.697-0.044-1.499-0.735-1.789l-7.929-3.308C48.232 4.911 47.432 5.245 47.142 5.934z"/>
</g>
</svg>
</a>
</body>
</html>
但如果我将其悬停,这是有效的。我如何在页面加载后立即让它开始增长(超过1秒),或者我动态地将类附加到它上。如果我删除:hover
,那么它只是开始完全增长,而不会动画化。有人知道怎么解决这个问题吗?
感谢
使用关键帧作为以下
/* Shorthand version */
.hub-icon-container svg {
position: relative;
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.hub-icon-container svg:hover {
width: 500px;
height: 500px;
}
.hub-icon-container svg {
-webkit-animation: blowup 5s infinite; /* Safari 4+ */
-moz-animation: blowup 5s infinite;/* Fx 5+ */
-o-animation: blowup 5s infinite; /* Opera 12+ */
animation: blowup 5s infinite;/* IE 10+, Fx 29+ */
}
http://jsfiddle.net/dshun/985bzyu8/
相关文章:
- 如何在没有单词的情况下从命令行运行Node.js程序'节点'
- 在php中不运行java脚本的情况下重定向页面
- 在禁用浏览器flash插件的情况下运行Karma测试
- 在不加载页面的情况下运行javascript
- CSS转换获胜't在没有“setTimeout”的情况下运行
- CSS 转换不会在没有 setTimeout 的情况下运行
- 我的javascript不会在没有警报的情况下运行
- Apache Cordova:在不启动浏览器应用程序的情况下运行Cordova运行浏览器
- 强pm不会在NODE_ENV=生产的情况下运行
- Javascript在不打算运行的情况下运行多次
- 在不安装Zend优化器的情况下运行php文件
- 如何在没有缓存/cookie的情况下运行/调试Web应用程序项目
- 仅在尚未运行jQuery UI的情况下运行动画
- 如何在不停止的情况下永远运行node-js
- 如何在启用ES6功能的情况下运行Node.js应用程序
- 如何在没有网络工作者的情况下运行多个脚本
- 可以插入<脚本>标记可以在不使用JavaScript中的eval的情况下多次运行
- 节点包因果报应没有在没有信息的情况下运行
- 在不重新运行jquery验证的情况下检查表单是否有效
- Bxslider预加载程序在没有图像的情况下以无限循环运行