I'm trying to animate a card using transition with css and can't seem it working.
Here's the source script:
.paper{
border: 0px;
width: 100%;
height: 100%;
border: 0px;
position: absolute;
top: 0;
left: 0;
}
.pagesfront,
.pagesback{
background-color: #fff3d6;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transform-origin: left;
transition: transform 0.5s;
}
.pagesfront{
z-index: 1;
}
.pagesback{
z-index: 0;
}
.flipped .pagesfront,
.flipped .pagesback{
transform: rotateY(-180deg);
}
Is there something I'm missing in the class pages where the transition comes in or is there something else?
My guess is you're putting the class .flipped on the wrong html element.
You do realize that the parent element of .pagesfront or .pagesback needs to have the class .flipped in order to get the flipping animation working, right?
If that was your intention, never mind what I said. If you meant to trigger the animation by adding the .flipped class to either .pagesfront or .pagesback, you might need to re-write that CSS code like this:
.pagesfront.flipped,
.pagesback.flipped{
transform: rotateY(-180deg);
}
(note there is no space between .pagesfront/back and .flipped.)
thanks for the answer, sorry to take your time but it turns out all i need is reopen the browser, what a weird case
Related
I'm building a small website without JS for school and I'm stuck on an animation problem.
I want to get rid of the closing animation on my mobile menu when resizing the window. Because currently, if I reduce the size of the window the menu will appear for a brief moment before going to the side (outside of the viewport).
My menu general style in the media query is the following :
.menu {
position: fixed;
z-index: 80;
width: 19rem;
transform: translateX(100%);
height: 100%;
top: 0;
right: 0;
padding-top: 4.4rem;
justify-content: revert;
text-align: right;
box-shadow: var(--b-shadow-l);
background-color: seagreen;
/* todo */
transition: 800ms;
}
When the menu is opened :
#mobile:checked ~ .menu {
transform: translateX(0%);
transition-property: transform;
transition-duration: 800ms;
}
Codepen to better see the situation : https://codepen.io/aayko/pen/OJEErBM
My only solution so far is to remove the closing animation ...
I'm looking for anything, even if it means changing the way I style my mobile menu.
Just remove the whole transform in your code above, instead give the right: -100% when normal and right: 0 when checked, the animation is the same without the flash disappear.
.menu {
position: fixed;
z-index: 80;
width: 19rem;
height: 100%;
top: 0;
right: -100%;
padding-top: 4.4rem;
justify-content: revert;
text-align: right;
box-shadow: var(--b-shadow-l);
background-color: seagreen;
/* todo */
transition: 800ms;
}
#mobile:checked ~ .menu {
right: 0;
}
I recently came across this exact same issue and ended up figuring out a pretty good solution to it. I documented it all at https://stevenwoodson.com/blog/solving-animation-layout-flickering-caused-by-css-transitions/ if you're still in need of a fix!
The gist is that the transition needs to be added separately in a different class so you can remove it when you're not actively opening or closing the menu.
I am using CSS modules for my project, but Material Icon is not making the changes specified via className prop
import SettingsIcon from "#mui/icons-material/Settings";
import css from "./LandingPage.module.css";
<SettingsIcon className = {css.settingsButton}/>
LandingPage.module.css file
.settingsButton{
position: absolute;
right: 20;
top: 20;
display: block;
height: 70px;
width: 70px;
transition: transform .7s ease-in-out;
color: white;
}
.settingsButton:hover{
transform: rotate(360deg);
}
The problem is the default transition property of .MuiSvgIcon-root is more specified than yours.
You need to increase the priority of your css in your module.css file using :global notation like this:
:global(.App) .settingsButton {
position: absolute;
right: 20;
top: 20;
display: block;
height: 70px;
width: 70px;
transition: transform 0.7s ease-in-out;
color: white;
}
:global(.App) .settingsButton:hover {
transform: rotate(360deg);
}
Note that, in this case .App exists my app, if it does not exist in your app, you can wrap your icon with another custom div with a specific className and use it instead of .App.
You can take a look at this sandbox for a live working example of this solution.
I'm trying to add a cool little opacity transition for my extension. I've looked up many ways to go about this, and nothing has seemed to work so far. Is this even possible? I have the latest version of Chrome.
A preview of it not working
CSS:
.container .primary:after {
opacity: 0;
transition: opacity 6s ease-out;
}
.container .primary:hover:after {
opacity: 1;
content: "Go through a list of friends to remove";
position: absolute;
top: 100%;
width: 100vw;
height: 20px;
margin: 10px;
font-size: 13px;
}
It's hard to reproduce from your code but there's a few main problems:
Your pseudo element has top:100% so it's probably hanging off the bottom of the screen somewhere. You can use position:relative on the container to prevent this.
It's a bad idea to put text into pseudo elements. As another commenter pointed out, they can't be picked up by screen readers. Here's an in-depth article on the w3 website about this.
You absolutely do not want to transition something for 6 seconds! Try to stick to half a second maximum or your UI will feel slow. Here's a great writeup on the subject.
And finally, a full snippet combining the above suggestions. This is not perfect by any means, but it should be enough to get you started:
.container {
position: relative;
padding:10px;
font-family:'Arial';
border:1px solid black;
}
.container .tooltip {
opacity: 0;
transition: opacity 0.4s ease-out;
position: absolute;
top: 100%;
left: 0;
height: 20px;
padding:10px;
font-size: 13px;
}
.container .primary:hover .tooltip {
opacity: 1;
}
<div class="container">
<div class="primary">div
<div class="tooltip">"Go through a list of friends to remove"</div>
</div>
</div>
I have a series of round images that are part of an image gallery. I’ve added an overlay and positioned the text in the location that I want, but now the overlay is removing the URL link to the image, and I'm trying to get the overlay to retain the link.
I’m working with a SquareSpace template so I can’t move any of the blocks around as they are rendered by CMS.
The text is in this here: .image-slide-title, and the image is here: .thumb-image .loaded, and the link has these classes: image-slide-anchor .content-fit
This is the page I'm working on: https://cesare-asaro.squarespace.com/work
And this is the code that I have so far for this particular section:
#portfolio {
background-repeat: repeat;
background-color: rgba(239,93,85,1);
}
.margin-wrapper:hover { //for portfolio hovers
position: relative;
}
.margin-wrapper:hover a:after {
opacity:.8;
}
.margin-wrapper a:after {
border-radius: 50%;
content: '\A';
position: absolute;
width: 100%; height:100%;
top:0; left:0;
background:rgba(255,255,255,0.8);
opacity: 0;
transform: scale(1.002)
margin: 0 -50% 0 0;
transition: all .7s;
-webkit-transition: all .7s;
}
.sqs-gallery-container{
overflow: visible;
}
.margin-wrapper:hover .image-slide-title{
opacity:1;
color: rgba(239,93,85,1);
-webkit-transition: all .7s;
}
.image-slide-title{
font-size: 50px;
text-transform: uppercase;
line-height: 100%;
opacity:0;
position: absolute;
margin: -100% 0;
height:100%;
width: 100;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
white-space: normal;
}
I’m getting quite confused by the different approaches, some with JS some without, and the multiple uses of :after and :hover (I just tinker a bit with code).
Your overlay is probably blocking the click event to the thing below it, preventing it from triggering the link.
Just add pointer-events: none to the overlay. This will make it not capture the click, allowing it to fall to the element below it.
I've searched everywhere for many weeks but I can't find an answer for my problem.
Is it possible to have an image inside a regular triangle?
I've seen many ways to create a shape or a mask, but I need a real triangle because I need to have several triangles next to each other, with some of them aligned upside-dwn, like in this= image:
http://www.tiikoni.com/tis/view/?id=d49c960
I've used color to divide the two types of triangle, but all of them have images instead colors.
I've tried using skewX, skewY and rotate, I have a sufficient result but it's not perfect:
<div class='pageTri2'>
<a href='#' class='option2'>
<img src='image.jpg'>
</a>
</div>
<style>
.pageTri2 {
overflow: hidden;
position: relative;
margin: 40px auto;
width: 250px; height: 250px;
display: inline-block;
}
.option2, .option2 img { width: 100%; height: 100%; }
.option2 {
overflow: hidden;
position: absolute;
transform: skewX(-25deg) skewY(45deg);
transform-origin: 50% 50% 0;
}
.option2:first-child {
transform-origin: 100% 0;
}
.option2:last-child {
transform-origin: 0 100%;
}
.option2 img { opacity: .75; transition: .5s; }
.option2 img:hover { opacity: 1; }
.option2 img, .option2:after {
transform: skewX(-20deg) skewY(-20deg) rotate(-50deg);
transform-origin: 0 100% 0;
}
.option2:first-child:after { top: 0; left: 0; }
.option2:last-child:after { right: 0; bottom: 0; }
</style>
Is it possible to have a perfect result?
Or maybe I'm thinking in the wrong direction?
Thanks
Ale
EDIT: I've done it!! Thanks to #Spudley for address me to SVG and thanks to #o.v. for the suggestion to use jsfiddle.
Here's my code: http://jsfiddle.net/wkJKA/
In all seriousness, having seen your mock-up image of what you're trying to achieve, I'd say drop the idea of doing it in CSS.
Stuff like this is much better done using SVG rather than CSS. CSS simply wasn't designed for creating complex shape patterns. It can do it, but it gets messy quickly, and for something like the effect you're after, you'll end up needing some extra HTML markup. SVG is designed for exactly this kind of thing, and does it well.
The only downside is lack of support for SVG in old IE versions, but there are work-arounds for this. (and in any case, old-IE support clearly isn't a priority for you, given that you're already using transform and other CSS that doesn't work with old IE)
use transparent png or simply do triangles with css. Here is a link to css shapes http://www.css3shapes.com
You could rely on specifics of border rendering to achieve a triangle-looking shape. The shape could then be added with pseudoelements.
.pointy:before {
border:50px solid transparent;
border-bottom:86px solid green;
border-top:0px solid transparent;/*renders looking like a triangle with 100px sides*/
width:0;
height:0;
display:inline-block;
content:"";
margin:0 -75px -5px 0; /*for a 50x50 icon*/
}
Fiddled