标签: css-animations
CSS3动画translate3d不起作用
我一直在尝试使用jQuery动画和CSS3动画,我也想测试2D/3D翻译以查看哪个更好.
有谁知道为什么我的CSS3 translate3d不起作用？我在桌面和移动设备上试过了.
任何帮助赞赏
HTML
<div id="container1" class="container">transition</div>
<div id="container2" class="container">translate</div>
<div id="container3" class="container">translate3d</div>
<div id="container4" class="container">jQ animate</div>
CSS
.container {position:absolute; left:20px; width:80px; height:80px; padding:5px;}
/* transition */
#container1 {top:20px; background:red;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s linear;
-ms-transition:all 0.3s linear;
transition:all 0.3s linear;}
#container1.on {left:250px} /* It moves if from pos absolute of parent, the body tag in this example */
/* 2D translate */
#container2 {top:120px; background:yellow;
-webkit-transition:all 0.3s linear;
-moz-transition:all 0.3s linear;
-o-transition:all 0.3s …推荐指数
解决办法
查看次数
如何为:active行创建一个带有三角形的<ul>？
我知道我的头衔并不是最好的,但我尽我所能.解释我的问题对我来说有点困难,但我想要的是创建一个在活动元素中有一个"三角形"的水平列表.我在下面显示一张图片.
这可能与CSS？我知道如何使用jQuery,但我想现在使用CSS而不是jQuery/Javascript.
我实际上创建了一个小提琴,您可以在下面找到链接:http:
//jsfiddle.net/jackbillstrom/3dNcj/
我尝试了一个javacript解决方案,但对它不满意,因为我想用CSS代替.我的目标是让你在示例中看到的那个三角形"轻松" <li>点击你之间.这甚至可能还是我在做梦？
推荐指数
解决办法
查看次数
html css中的关键帧动画无法正常工作
我正在玩一些动画,但它根本不起作用.它必须是一个反弹动画.这是我第一次使用它.所以我希望我不犯错误
这是我的.html文件:
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="logo"><img src="Header_red.png"/></div>
<div class="intro"><p>some text</p></div>
</body>
</html>
这是我的.css文件:
html{
background: url(background.jpg) no-repeat center center fixed;
overflow:hidden;
}
.logo
{
text-align:center;
margin-left:auto;
margin-right:auto;
animation-delay:1.2s;
animation-duration:4.8s;
animation-iteration-count:1;
animation-fill-mode:both;
animation-name:logo;
}
.intro{
text-align:left;
margin-left:100px;
margin-right:auto;
animation-duration:5.5s;
animation-iteration-count:1;
animation-fill-mode:both;
animation-name:logo;
}
@keyframes logo {
0%{transform:
translate(000px, 1500px);}
20%
{
transform:translate(000px, 235px);
}
25%
{
transform:translate(000px, 265px);
}
65%
{
transform:translate(000px, 265px);
}
100%
{
transform:translate(000px, -300px);
}
}
@keyframes intro{
0% {transform:
translate(000px, …推荐指数
解决办法
查看次数
AngularJS使用回调进行动画处理,等待下一个动画启动
我有一个简单的AngularJS项目,带有一个指令,我希望在另一个完成时启动一个CSS动画 - 希望我做一个sende,我这里有一个jsfiddle示例,动画同时运行 - 我想要第一张"卡片"在下一次开始之前停止的动画 - 怎么能这样做？
<div ng-app="flip" ng-controller="flipCtrl">
<div class="card card1 draw" my-show="">test1</div>
<div class="card card2 draw" my-show="">test2</div>
</div>
app.directive("myShow", function(){
return {
scope:{
param: "&myShow"
},
link: function( scope, element, attrs ){
element.on('click', function() {
if(element.hasClass('draw')) {
element.removeClass('draw');
}else{
element.addClass('draw');
}
});
}
}
});
javascript css3 css-animations angularjs angularjs-directive
推荐指数
解决办法
查看次数
仅在初始渲染后反应CSS动画
我正在构建一个React应用程序,可以将一个Person添加到ScheduleCell.在添加了Person之后,他可以确认或拒绝他的存在,这将触发CSS动画,以显示正在观看计划的人刚刚发生的事情.
一切都工作得很好,除了当我第一次加载时间表时,如果他已经确认或拒绝了提案,那么每个人都会动画.
由于图片胜过千言万语,这是我的问题:
有没有办法我可以检测到Person刚刚第一次呈现,所以我不添加触发CSS动画的CSS类,并且能够在下次添加该类？
这里有一些(咖啡)代码更清晰:
Person = React.createClass
render: ->
confirmation = @props.person.confirmation
className = 'alert '
if confirmation == undefined
className += 'neutral'
else if confirmation == true
className += 'good '
className += 'hvr-wobble-vertical' if @animate
else if confirmation == false
className += 'bad '
className += 'hvr-wobble-horizontal' if @animate
<div className={className}
{@props.person.username}
</div>
我在这里想要的是@animate在首次呈现组件时(页面加载时)返回false,然后在呈现后一直返回true.
我试过这样做,但它似乎不起作用:
getInitialState: ->
{ mounted: false }
componentDidMount: ->
@setState { mounted: true }
animate: ->
@state.mounted
谢谢你的时间,
干杯!
推荐指数
解决办法
查看次数
为什么我的animate.css动画在Chrome中运行但在Firefox中不运行？
我的动画在Firefox中不起作用; 它们淡入但不会像在Chrome中那样从外部滑入.我正在使用animate.css库来提供动画.
h2{
text-align:center;
}
span {
-webkit-animation-duration: 3s !important;
-moz-animation-duration: 3s !important;
-o-animation-duration: 3s !important;
animation-duration: 3s !important;
}
.dly {
-webkit-animation-delay: 2s !important;
-moz-animation-delay: 2s !important;
-o-animation-delay: 2s !important;
animation-delay: 2s !important;
}
<div class="container">
<h2>
<span class="animated fadeInLeftBig">A</span>
<span class="dly animated bounceInDown"> B</span>
<span class="animated fadeInRightBig"> C</span>
</h2>
</div>
他们为什么在Chrome中工作,但在Firefox中却没有？如何让它们在Firefox中运行？
推荐指数
解决办法
查看次数
纯CSS3不断移动滑块
我想用CSS3(以及后来的Sass)制作不断移动的滑块.我有九个图像和掩模div宽度为850px,我知道如何为第一个图像设置动画,但是如何计算其余部分的值.
我在Smashing Magazine和hugogiraudel.com上找到了很好的教程,但是有静态状态,我不知道如何让它继续运行.
如果有人可以帮助我理解这个以及如何使用SASS,那将是很好的.
这是CodePen与我所做的.这是代码:
#slider {
width: 850px;
margin: 0 150px;
}
.ruler {
display: flex;
flex-flow: row nowrap;
border: 1px solid black;
}
.u10 {
flex: 1 1 0;
width: 10%;
text-align: center;
z-index: 0;
}
.u10:nth-child(even) {
background-color: white;
}
.u10:nth-child(odd) {
background-color: gray;
}
ul {
list-style: outside none none;
position: relative;
height: 100px;
}
ul:after {
border: 1px solid black;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: …推荐指数
解决办法
查看次数
如何使用AngularJS使用ng-hide淡出元素？
我当前可以根据控制器中的布尔条件显示/隐藏元素.如果条件为真,我怎么能淡出元素而不是立即隐藏它？
<div id='conversion-image' ng-hide="pages.length > 0">
generating pages...
<br />
<img src='Images/ajax-loader-blue.gif' />
</div>
我也已经包含了ngAnimate的依赖性.
var app = angular.module("app", ["ngAnimate"]);
推荐指数
解决办法
查看次数
是否可以仅使用CSS重新创建选取框？
我有一个可以使用选框解决的要求
.ticker {
white-space: no-wrap;
}
.item {
display: inline-block;
cursor: pointer;
}<marquee class="ticker" onmouseover="this.stop()" onmouseout="this.start()">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
</marquee>我们如何使这与html5兼容,因为marquee已被弃用？
我看过几个例子,但大多数都依赖于固定宽度.在我的示例中,从服务器接收项目,因此可能有很多项目.此外,我将需要停止悬停,因为项目是其他东西的链接.
非常感谢您的帮助,
PS:我想确保在开始探索javascript之前我们不能在CSS中执行此操作.
推荐指数
解决办法
查看次数
SVG：如何为路径的高度设置动画？
我正在尝试使用svg rect标签创建圆角。但是rx和ry在四个边缘中制作圆形边缘。相反，我试图仅创建两个边缘（左上和右上）。我对path命令执行的操作相同（工作JS Fiddle）。
创建rect的原因是我正在尝试创建动画的生长高度。
<rect x="50" y="0" fill="#f00" width="100" height="100">
<animate attributeName="height" from="0" to="100" dur="0.5s" fill="freeze" />
</rect>
已编辑
以下代码将使圆角达到我的期望。我已经使用三次曲线法。
<svg style="width:500px; height:800px;">
<path class="draw" d="M 75 445 L75 116.66666666666669 C 80 91.66666666666669 120 91.66666666666669 125 116.66666666666669 L125 445 75 445" style="stroke: rgb(192, 31, 31); stroke-width: 2px; fill: rgb(216, 62, 62);"></path>
</svg>
我的问题/问题是当我在路径中创建动画时，高度不会随着动画的增长而增加。
推荐指数
解决办法
查看次数
标签 统计
css-animations ×10
css ×7
html ×5
css3 ×4
javascript ×4
angularjs ×2
html5 ×2
animation ×1
jquery ×1
marquee ×1
ng-hide ×1
reactjs ×1
svg ×1
translate3d ×1