I'm trying to create a scrolling photo banner. It is working on IE, safari (mobile), and chrome on android and iphone. It is not working on my desktop or if I request desktop site on any chrome device. I've spent hours googling trying to figure this out and cannot work it out at all.
This is my first time asking a question so if something is wrong in my post please bear with me. Thank you
#container {
width: 100%;
overflow: hidden;
margin: 5px;
background: white;
}
.photobanner {
height: 350px;
width: 3550px;
margin-bottom: 10px;
}
.photobanner img {
margin: 10px;
max-height: 300px;
margin-top: 30px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
#keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
#-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
/* Landscape phones and down */
#media (max-width: 750px) {#container {
width: 100%;
overflow: hidden;
margin: 5px 5px;
background: white;
}
.photobanner {
height: 160px;
width: 3550px;
margin-bottom: 5px;
}
.photobanner img {
margin: 5px;
max-height: 150px;
margin-top: 5px;
}
}
I hope this answer is not coming too late, but I just fixed an issue similar to yours so thought I would share my solution.
Put your general animation rule after the browser specific ones. See this answer (css3 animation not working in chrome).
You may need to open your website in an "incognito" tab! Stylesheet changes may not update immediately due to browser cookies.
Related
I'm looking for CSS to make an image transition 5px to the right smoothly. I have the move and opacity sorted, but am unsure how to make it run smoothly and not seem like a big jump when hovering.
Have the following code but don't really know how to do the transition correctly. Any help is much appreciated!
.naviconmain {
transition: all 2s ease;
opacity: .7;
display: block;
align: right;
margin-left: auto;
margin-right: 15px;
}
.naviconmain:hover {
opacity: 1;
position: relative;
left: 4px;
}
Thanks for all the help - very much appreciated. I've gone with:
.naviconmain {
transition: all 2s ease;
opacity: .7;
display: block;
align: right;
margin-left: auto;
margin-right: 15px;
}
.naviconmain:hover {
opacity: 1;
position: relative;
transform: translateX(4px);
transition: all 0.5s ease-in-out;
}
I came across a strange issue on Safari. Please take a look at: https://codepen.io/enguerranws/pen/PomzqWe
If you go hover the lightly red box, you'll notice a transition on an element inside.
If you test it in Chrome or Firefox, the animation runs as expected: it's a small black circle that scales up.
On Safari, it goes weird: it's a black square with some kind of transparency that goes round and fully opaque when the transition ends.
Here's the relevant part of code:
#test:hover #circle {
transform: scale(200);
}
#circle {
position: absolute;
transition: -webkit-transform .5s ease-in-out;
transition: transform .5s ease-in-out;
/* transition: all 1s ease; */
width: 2px;
height: 2px;
top: 30px;
border-radius: 10px;
mix-blend-mode: difference;
background-color: #000;
}
Does anyone as quick and dirty hack for this?
EDIT:
Actually, I found a way to get around this issue using width and height values for transform.
Try to use will-change: transform;. Added to your code:
#test {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
padding: 40% 10px;
background: rgba(255,0,0,.1);
}
#test:hover #circle {
transform: scale(1);
}
#circle {
position: absolute;
transition: transform .5s ease-in-out;
will-change: transform;
transform: scale(.005); /* point */
transform-origin:left top;
width: 2px;
height: 2px;
top: 30px;
border-radius: 400px;
width: 400px;
height: 400px;
background-color: #000;
}
<div id="test">
<div id="circle"></div>
Text here
</div>
I am having some troubles styling my div. I would like to allow overflow-y only when the height transition ends (from 80px to 100% of the parent div). If I uncoment the below "overflow-y: auto" line, the overflow-y works fine but the scroller is visible during the animation which does not look good.
.mydiv{
position: absolute;
width: 100%;
bottom: 0;
border-radius: 0 0 2px 2px;
border: solid 1px #eee;
background-color: #fff;
height: 80px;
transition: all 0.5s;
transition-timing-function: ease-in-out;
overflow: hidden;
clear: both;
}
.mydiv:hover{
height: 100%;
border-radius: 2px;
/* overflow-y: auto; !!! */
}
Edit: Sorry, I forgot to add the animation-fill-mode: forwards so it will pause on end frame and stay as long as hovered. Fixed now.
Edit 2: Added code to reverse anim on mouse out.
I think the only way you may be able to do what you are aiming for is with either css animation frames, or javascript.
CSS Animation (transition the properties that should animate through 99% of animation and only transition overflow property between final 1% of animation:
.mydiv:hover{
animation-duration: 0.5s;
animation-name: 'myAnim';
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#keyframes myAnim {
0% {
height: 80px;
border-radius: 0 0 2px 2px;
overflow: hidden;
}
99% {
height: 100%;
border-radius: 2px;
overflow: hidden;
}
100% {
height: 100%;
border-radius: 2px;
overflow: auto;
}
}
That will animate on hover, but on mouse out it will just snap back to original state. You can reverse the animation on mouse out but doing so comes with some issues that should be considered. The only way I know to play animation on mouse out with pure css is to add it to the elements default state.
The reverse animation will play on initial page load. The only workarounds I know are javascript based.
The reverse animation will play from its beginning on mouse-out even if the hover anim didn't have time to complete. This can cause a sudden snap if hovered only briefly. I think this can be addressed with css animation-fill-mode: and animation-delay: values, but I have not managed to make it work.
because of the snapping that may happen on very brief hovers, it is better to use a separate anim for mouse-out so the scrollbar doesn't flicker.
.mydiv{
position: absolute;
width: 100%;
bottom: 0;
border-radius: 0 0 2px 2px;
border: solid 1px #eee;
background-color: #fff;
height: 80px;
overflow: hidden;
clear: both;
animation-duration: 0.5s;
animation-name: 'myAnim';
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
.mydiv:hover{
animation-duration: 0.5s;
animation-name: 'myAnim';
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
}
#keyframes myAnim {
0% {
height: 80px;
border-radius: 0 0 2px 2px;
overflow: hidden;
}
99% {
height: 100%;
border-radius: 2px;
overflow: hidden;
}
100% {
height: 100%;
border-radius: 2px;
overflow: auto;
}
}
#keyframes myAnimOut {
0% {
height: 100%;
border-radius: 2px;
overflow: hidden;
}
100% {
height: 80px;
border-radius: 0 0 2px 2px;
overflow: hidden;
}
}
I've got a box with a nice hover overlay that animates in. This works fine on all browsers, however on Safari (desktop and mobile) there are some styles that aren't applied correctly (Width, height, and padding). When I toggle these styles off and on again using the inspector everything is as it should be, Safari just doesn't seem to correctly apply at the beginning. Also, there is no CSS inheritance issue as Safari claims to be using the rules as defined below, adding !important has no effect. See code and images below.
HTML
<div class="col-md-5 hla-building-col animated fadeInUp" style="height:350px;background-image:url(/placeholder.jpg)">
<div class="overlay text-center">
<h3>Karma</h3>
<p>Sitting right in the heart of it all...</p>
<a>Learn More</a>
</div>
</div>
CSS
.hla-building-col {
padding: 0;
box-shadow: -1px 0px 50px -6px rgba(102,103,102,1);
}
.hla-building-col .overlay {
background-color: rgba(255,255,255,.9);
width: 80%;
height: 40px;
padding: 8px 15px;
margin: 0 auto;
transform: translateY(165px);
transition: all 600ms ease;
}
.hla-building-col:hover .overlay {
width: 100%;
height: 100%;
padding: 100px 15px;
/**** EDIT: Properties above are not rendering ****/
margin: 0 auto;
transform: translateY(0);
/* transition: all 600ms ease; */
animation-duration: 1s;
animation-name: slidein;
}
.hla-building-col .overlay p, .hla-building-col .overlay a {
opacity: 0;
}
.hla-building-col:hover .overlay p, .hla-building-col:hover .overlay a {
opacity: 1;
transition: all 1000ms ease;
transition-delay: 1000ms;
}
#keyframes slidein {
from {
width: 60%;
height: 40px;
transform: translateY(165px);
padding-top: 8px;
}
to {
width: 100%;
height: 100%;
transform: translateY(0);
padding-top: 100px;
}
}
Safari uses WebKit, you can add it to your css with the -webkit- prefix.
Read more about it here: en.wikipedia.org/wiki/WebKit and here: developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions
Here's the CodePen.
The square changes to a circle as expected when it slides to the right, but when it returns back to the left, it stays a circle instead of changing to a square.
Also, I can only click the <a> once. If I try to click multiple times, it doesn't work.
Trying to do this with only CSS (if possible).
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.shape:target {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The closest you can get with just CSS is this, as far as I know:
body {
margin-top: 30px;
background: gainsboro;
}
.container {
margin: auto;
width: 100%;
}
.path {
position: relative;
overflow: hidden;
width: 100%;
height: 80px;
x-background: white;
}
#keyframes ani {
0% {
left: 0;
}
50% {
left: 95%;
}
100% {
left: 0;
}
}
.path a:focus .shape {
border-radius: 50%;
transition: all .7s ease-in-out;
animation-name: ani;
animation-duration: 2s;
animation-direction: alternate;
animation-fill-mode: none;
}
.shape {
position: absolute;
left: 0;
background-color: slateblue;
width: 80px;
height: 80px;
display: block;
border-radius: none;
transition: border-radius .4s ease-out;
}
<div class="container">
<div class="path">
<span id="elem" class="shape"></span>
</div>
</div>
The problem before was triggering the state with :target:. This is tough to debug with sites like Codepen or other embedded editors, since you can't see the hash change. Basically, clicking the link would append #elem to the URL, apply the :target styles to .shape, and stay like that until the hash changes.
This solution uses :focus, which gets you closer to your goal, but not all the way. To repeat the animation, you need to defocus/blur the circle, then click it again.
I'm usually all for CSS-only effects, but I'm pretty sure you'll need Javascript for this. Something as simple as applying a class on click, waiting 2 seconds, then removing the class would accomplish the same effect more reliably.