Tag: css animations

使用Jquery触发CSS动画: 我有一个CSS动画，我想点击按钮触发它，然后链接到另一个页面。是否还有一种方法可以在页面加载后立即播放动画？提前致谢！ Untitled Document $(document).ready(function(){ $(“.main-btn”).mouseup(function(){ $(“.wrapper”).reload(); }); }); click @charset “UTF-8”; .main-btn { opcacity:1.0; position:absolute; width:172px; height:172px; } .main-btn:hover { opacity:0.7; } .btn-txt { width:100%; height:100%; z-index:-100; text-align:center; position:absolute; margin-left:-10px; top:11%; font-family:Arial; text-transform:uppercase; color:#FFF; font-size:2.5em; } .wrapper { width: 172px; /* Set the size of the progress bar */ height: 172px; position: absolute;/* […]

在下拉列表中旋转自定义图像作为箭头: 我按照在线教程帮助我用我自己的图像替换浏览器的默认下拉选择箭头。这很好，你可以在这里看到这个例子。 .headerDropdown { border-radius: 6px; border: 2px solid #d4d4d4; height: 34px; } .headerDropdown select { height: 34px; line-height: 34px; padding-left: 10px; padding-right: 5px; margin-right: 20px; font-size: 16px; border: 0 !important; /*Removes border*/ -webkit-appearance: none; /*Removes default chrome and safari style*/ -moz-appearance: none; /*Removes default style Firefox*/ background: url(“http://sofzh.miximages.com/javascript/caret-black-small-up-icon.png”) right no-repeat; width: 100%; background-position: 98% […]

使用精灵平滑CSS动画: 我试图动画我的精灵，它与此类似。如果有人能展示如何让它更顺畅，我将不胜感激。我的精灵中只有3张图像。延迟1秒，所以过渡非常糟糕。我试过用： from { -webkit-transform: translateX(..); } to { -webkit-transform: translateX(..); } 但它没有用。我真的很感激任何帮助。

基于滚动的动画在定义区域之外工作: 所以我是JS的新手。我试图让滚动动画只在指定区域工作，但我的“position：fixed”标签使它出现在我的网站顶部并一直滚动它而不是动画开始和仅在其定义的框架中工作。我有什么想法可以解决这个问题？这就是它的样子（这是钢铁侠头盔，请原谅未完工的网站）： http ： //frontlinecreative.co/test-page/ 这是我正在使用的代码： $(document).ready(function() { //variable for the ‘stroke-dashoffset’ unit var $dashOffset = $(“.path”).css(“stroke-dashoffset”); //on a scroll event – execute function $(window).scroll(function() { //calculate how far down the page the user is var $percentageComplete = (($(window).scrollTop() / ($(“html”).height() – $(window).height())) * 100); //convert dashoffset pixel value to interger var $newUnit […]

如何延迟超链接直到CSS动画结束？: 一旦CSS动画结束，我正试图让锚标签重定向。我尝试在jQuery中捕获href并使用’setTimeout’在转到锚点之前导致延迟（这是以前的线程中建议的），但它一直没有工作。 $(document).ready(function() { $(‘.section’).click(function() { var goTo = this.getAttribute(“href”); //HOLDS HREF var $elementA = $(‘.section’).bind(‘webkitAnimationEnd’, function() //ANIMATION BEGIN { $(this).removeClass(‘clicked’); }); var $elementB = $(‘.section’).bind(‘animationend’, function() { $(this).removeClass(‘clicked’); }); $(‘.section’).click(function() { $(this).addClass(‘clicked’); //ANMATION END }); setTimeout(function() { //SUPPOSED TO DELAY LINK window.location = goTo; }, 300); }); }); a { overflow: hidden; } .section […]

一旦空间可用，立即开始重复: 这是我迄今为止所用的笔。我一直在使用CSS3但是我愿意使用其他方法，如果它能更好地工作： .userAttributes > .attributeGroup > .favoriteArtistsAttr { max-width: 74%; animation: marquee 10s linear infinite; } @keyframes marquee { 0% { text-indent: 0; } 100% { text-indent: -100%; } } 我希望大帐篷能够在p结束时滑入框架的那一刻开始重复。我还需要用一个mousover停止并且可以滚动（这个部分已经工作）。我发现这个例子可以实现我想要实现的目标。我注意到他们是通过复制内容来实现的，但是我无法让它正常工作。我也想知道这是否是实现我的目标的最佳方式，也许最好使用javascript或一些jquery插件？我想确保它在所有浏览器上都能正常工作（在合理范围内）

运行javascript函数时CSS动画停止: 假设我有这个javascript函数： function pauseComp(ms) { var date = new Date(); var curDate = null; do { curDate = new Date(); } while(curDate-date < ms); } 和新的font-awesome 3中的css3动画（例如，）。当我运行上面的javascript函数时，它会在函数运行时停止微调器。看看我在这里谈论的是什么。基本上，javascript停止css动画，我想知道为什么，或者如果有人注意到这个/找到了解决方法。我已经尝试将它放在setTimeout（fn，0）中，其中fn是长进程，但后来意识到为什么它也不起作用（js不是multithreading的）。有人看到过这种情况吗？更新：有趣的是，虽然与浏览器界面的交互仍然受到影响，但在Safari中看起来并不是一个问题。

模态框与css关键帧冲突: 我创建了一个模态框，工作正常！之后，我解决使用css关键帧插入fadeInUp效果。但是，在完成此操作后，模态框失去了居中位置。谁能帮我解决这个问题？提前致谢！模态框与关键帧conflit DEMO 原始模态盒DEMO

随机关键帧定位每次迭代以创建下降的“矩阵代码”: 我正在尝试在许多独立的DIV上创建一个带有动画CSS类的HTML网页，这些DIV会移动到他们自己随机生成的位置。我有20个元素，随机生成的字符从页面顶部落下，随着它们沿着y轴移动而消散（就像Matrix代码一样）。编辑： JsFiddle演示记住范围是宽的，所以有时字符组生成很远（在小观察窗口外）在顶级JavaScript中生成随机字符 $(document).ready(function() { }); function generateChar() { var text = “”; var possible = “ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789«’¥~‹÷´`≠¡ˆ()][¶#@…•–!£$%&/?^*é§°ç_:è+òàù,.-“; text = possible.charAt(Math.floor(Math.random() * possible.length)); return text; } 20个div的HTML … JavaScript：这里我随机生成了字符（成功），但只有1个随机位置。所有元素都从相同的位置开始，而不是从他们自己的位置开始。 document.getElementById(“m1 “).innerHTML = generateChar(); … document.getElementById(“m20”).innerHTML = generateChar(); var divs = document.getElementsByTagName(“div”); for(var i = 0; i < divs.length; i++){ var xRandom = Math.round(Math.random() […]

IE11 – 通过jQuery.toggleClass（）切换类不激活IE11中的类 – 它适用于所有其他浏览器: 这适用于IE 11以外的所有浏览器。我的代码很基本。单击文本以切换“无限”类，其中（应该）永远循环反弹效果。 IE11将类应用于H1标签，但它不会像在所有其他浏览器中那样无限制地动画。预期的行为是它在加载时弹跳一次（这个工作）并单击文本应用“无限”类，它应该使它永远弹回（这在IE 11中不起作用）。 $(window).ready(function(){ $(‘h1’).on(‘click’,function(){ $(‘h1’).toggleClass(‘infinite’); }); }); Example 我在Windows 7上使用IE 11.0.9600.17239 这是另一个在开始时应用所有类的示例： Example 在发布第二个例子后，这让我相信这是一个结合IE 11的某种类型的jQuery问题…