I made a css that can rotate my image when someone hover it
But I would rotate this image every 10 seconds too
.smiley-construct {
width: 64px;
padding: 0;
}
.smiley-construct img {
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
}
.smiley-construct img:hover {
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
transform: rotate(540deg);
-webkit-transform: rotate(540deg);
-moz-transform: rotate(540deg);
-o-transform: rotate(540deg);
-ms-transform: rotate(540deg);
}
<div class="smiley-construct">
<img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png">
</div>
Can I change that to rotate my image every 10 seconds
but and keep the hover rotate too ?
Thanks
You can create a keyframe in css, something like this:
#keyframes rotating {
0% {
transform: rotate(0deg);
}
93% {
transform: rotate(0deg);
}
100% {
transform: rotate(540deg);
}
.smiley-construct img {
animation: rotating 10s infinite;
transition: 0.70s ease-in-out;
-webkit-transition: 0.70s;
-moz-transition: 0.70s;
-ms-transition: 0.70s;
-o-transition: 0.70s;
}
We can have two CSS animations - one which rotates the face then waits for the best part of 10s and keeps doing that and the other which kicks in on hover and just spins once.
I am not absolutely sure of the effect you want - is the face to go upside down after each rotate? You may want to play around with animation-fill-mode if not.
Here is a snippet:
.smiley-construct {
width: 64px;
padding: 0;
}
.smiley-construct img {
animation-name: spinwait;
animation-duration: 10s;
animation-iteration-count: infinite;
}
.smiley-construct img:hover {
animation-name: spin;
animation-duration: 0.7s;
animation-iteration-count: 1;
}
#keyframes spinwait {
0% {
transform: rotate(0deg);
}
7% {
transform: rotate(540deg);
}
7.1% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(540deg);
}
}
<div class="smiley-construct">
<img src="https://quentinrenaux.com/wp-content/themes/quentinrenaux-V2.01.2021/img/smile/smile.png">
</div>
You can make a function in javascript and make something like this:
Or make it jquery on when your page loads, but without knowing the structure and the resources available, I can not decide for you.
var elemPicture = document.getElementById("PictureId");
elemPicture.style.transition = "all 0.5s";
elemPicture.style.transform = "rotate(15deg)";
Better yet, use keyframes. No need to add extra JS if you can use CSS.
There's a pretty good explanation of how to do this here.
Related
The transform seems to work ok, but I've noticed that on the initial hover or touch the image doesn't open properly. After the initial touch or hover everything seems to function great. Thanks in advance for any assistance with what I hope is a simple fix.
body {
background: #000000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.hoverChange:hover {
content: url("https://i.postimg.cc/CL7mTV8p/monster.png");
width: 100%;
-moz-transform: scale(2.2) rotatez(-5deg);
-webkit-transform: scale(2.2) rotatez(-5deg);
-o-transform: scale(2.2) rotatez(-5deg);
-ms-transform: scale(2.2) rotatez(-5deg);
transform: scale(2.2) rotatez(-5deg);
cursor: crosshair;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
translate: -100px -100px;
/* When the animation is finished, start again */
animation-iteration-count: infinite;
}
.avatar {
transform: translatey(0px);
animation: float 5s ease-in-out infinite;
}
.avatar {
transform: translatey(0px);
animation: float 5s ease-in-out infinite;
}
#keyframes float {
0% {
transform: translatey(0px);
}
50% {
transform: translatey(-15px);
}
100% {
transform: translatey(0px);
}
}
<div class="col-sm-8 col-md-6 monster mb-5" data-animation="slideInLeft"
style="background-image: url(https://i.postimg.cc/NjPDF7bN/photo-1620207418302-439b387441b0.jpg)" ;>
<div class="px-5 hoverChange px-sm-0"><img
src="https://i.postimg.cc/vmk0qLV1/Web-Development-Promotion-Instagram-Post.png"
class="smallBorder avatar" width="100%"></img></div>
</div>
The only think I can think of is that the images are taking up to 1s to get. Using the web tools on your browser it's possible to see the network timings for each image. https://i.postimg.cc/vmk0qLV1/Web-Development-Promotion-Instagram-Post.png" took 1.3s to get and monster.png took about 1s to get.
The network request for monster.png only occurs at the hover event so it may be that it's just taking time to get the asset so you're not seeing the effect straight away.
A method for avoiding this behaviour has already been discussed here
I have added a keyframe animation to slowly zoom the background image in and it works perfectly, however when I move mouse out the animation jumps back to the original state instead of zooming out.
#startup.hover:before {
opacity:1;
-webkit-animation: animatedBackground 5s ease-in-out 1;
-moz-animation: animatedBackground 5s ease-in-out 1;
animation: animatedBackground 5s ease-in-out 1;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#-webkit-keyframes animatedBackground {
0% {
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
100% {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
}
Am I missing something here?
first of all, is .hover a class you are adding or were you meant to use :hover? Just pointing this out. Assuming this is a class, you should add the transitions animation on the id.
#startup:before {
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
transition: all 5s ease-in-out;
}
..this is why it's breaking when you are hovering out. There's no transition animation without the class!
You dont need such an advanced tool as a keyframes to make this effect.
It is easily achivable with transitions, here is an example.
https://jsfiddle.net/vqL3stjz/
.animable{
width: 100px;
height: 100px;
background-color: #000;
transition: all 500ms;
}
.animable:hover{
transform: scale(1.3, 1.3);
transition: all 500ms;
}
And if you need to make it with keyframes, then i suggest just applying reverse animation to unhovered element.
However, you will need to use some javascript then, to prevent side effect like animation running on the element right after it is loaded etc.
TL;DR Better use tranistions, unless you really need to use keyframes.
I've been trying to use a transition-delay when moving from "state A" to "state B" but not having that delay when moving back to state A. This is a general question though about whether the CSS spec says that the settings for a transition should be those when the transition starts or those from the state which is being transitioned to. Here is an example:
.menu {
transform: translateX(0%);
transition: transform 1s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 5s ease-out;
}
Should the opening animation animation take 1 second or 5 seconds?
My code is slightly more complicated as it uses a delay, but basically it boils down to this.
.menu {
transform: translateX(0%);
transition: transform 0.5s ease-out 0;
}
.menu.is-open {
transform: translateX(100%);
transition: transform 0.5s ease-out 0.5s;
}
When I try this in Chrome or Firefox I get a delay when opening the menu and no delay when closing the menu, but in IE11/Edge it behaves as it would without the delay set. So I'm not sure whether this is a browser bug, or whether I've misunderstood how transitions work, hence my more general question about which transitions are used.
It should be transition: transform and not transition: translate
The transition rule accepts CSS properties not values
Try reversing the order so that the .menu gets the half second delay
.menu{
transform: translateX(0%);
transition: transform 0.5s 0.5s ease-out;
}
.menu.is-open{
transform: translateX(100%);
transition: transform 0.5s 0s ease-out;
}
As for not working in IE, see vendor prefixes for transition and transform
Seems like you understood correctly how transition works. See my code snippet:
JSFiddle
.hoverable {
height: 50px;
background-color: yellow;
}
.moving {
width: 100px;
height: 100px;
background-color: red;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
-webkit-transition: transform 1s linear 0s;
transition: -ms-transform 1s linear 0s;
transition: transform 1s linear 0s;
}
.hoverable:hover + .moving {
-webkit-transform: translateX(200%);
-ms-transform: translateX(200%);
transform: translateX(200%);
-webkit-transition: transform 0.5s linear 0.5s;
transition: -ms-transform 0.5s linear 0.5s;
transition: transform 0.5s linear 0.5s;
}
<div class="hoverable">Hover me</div>
<div class="moving">I can move</div>
Maybe transition-timing-function: ease-out seems like delay for you in some cases, so I used transition-timing-function: linear in my example to show the transition with a constant speed.
The red block moves from 0% to 200% for 0.5s with 0.5s delay. And moves from 200% to 0% for 1s without delay. There is no any magic with how transition works.
I have this form on plunker and a struggling with adding a fade animation.
What I want to do is, before the keyframe animation starts have the content fade out. And when the new view appears, I want the the keyframe animation to finish and than an animate.css animation to run (fadeInUp for example).
So the view will animate and then the content inside the view will animate, If somebody can help me with this I would really appreciate it.
my current animation is using the following keyframe animation:
#-webkit-keyframes slideOutLeft {
0% {
transform: scaleY(1) scaleX(1);
}
20% {
transform: scaleY(0.01) scaleX(1);
}
40% {
transform: scaleY(0.005) scaleX(0.5);
}
50% {
opacity: 1;
}
100% {
transform: scaleY(0.005) scaleX(0.5);
opacity: 0;
}
}
#-webkit-keyframes slideInRight {
0% {
transform: scaleY(0.005) scaleX(0.5);
background: rgba(0,188,140,1);
opacity: 0;
}
50% {
transform: scaleY(0.005) scaleX(0.5);
background: rgba(0,188,140,1);
z-index: 1;
opacity: 0;
}
70% {
transform: scaleY(0.005) scaleX(1);
background: rgba(0,188,140,1);
opacity: 1;
}
100% {
transform: scaleY(1) scaleX(1);
}
}
Running on ng.enter and ng.leave
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 2s both ease;
-moz-animation:slideInRight 2s both ease;
animation:slideInRight 2s both ease;
}
/* leave animation */
#form-views.ng-leave {
-webkit-animation:slideOutLeft 2s both ease;
-moz-animation:slideOutLeft 2s both ease;
animation:slideOutLeft 2s both ease;
}
EDIT 1:
I have updated the code here
using:
#form-views.ng-enter * {
-webkit-animation:fadeIn 2s both ease 3s;
-moz-animation:fadeIn 2s both ease 3s;
animation:fadeIn 2s both ease 3s;
}
#form-views.ng-leave * {
-webkit-animation:fadeOut 0.5s both ease;
-moz-animation:fadeOut 0.5s both ease;
animation:fadeOut 0.5s both ease;
}
And this is the animation:
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
The code appears and disappearing at the correct time but doesn't animate the opacity.
I would try adding separate animation for fadeIn/Out and using the css animation delay to trigger one after the other. E.G:
/* enter animation */
#form-views.ng-enter {
-webkit-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
-moz-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
}
/* leave animation */
#form-views.ng-leave {
-webkit-animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
-moz-animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
}
and i think you know what the fadeIn and fadeOut animations should be.
UPDATE:
Here's a plunker with the code working the way I believe you want it to work. In chrome at least. You'll need to use the correct prefixes/no prefixes to get it working in other browsers.
I am using LESS and BOOTSTRAP for a website, and this is my first time actually using the less language, so this entire "mixins" thing is really confusing to me. I have read all of the documentation on the dotless website, and on the bootstrap site, but the actual "way" to use some of the mixins is escaping me.
In specific, I am having a hard time understanding how you discern what passes as a valid parameter. I am attempting to do with with transitions/transforms, using the following CSS...
-webkit-transform-origin: top;
-webkit-transition: all 0.2s linear;
-webkit-transform: scale(1, 0);
-webkit-animation-fill-mode: forwards;
-moz-transform-origin: top;
-moz-transition: all 0.2s linear;
-moz-transform: scale(1, 0);
-moz-animation-fill-mode: forwards;
-ms-transform-origin: top;
-ms-transition: all 0.2s linear;
-ms-transform: scale(1, 0);
-ms-animation-fill-mode: forwards;
-o-transform-origin: top;
-o-transition: all 0.2s linear;
-o-transform: scale(1, 0);
-o-animation-fill-mode: forwards;
transform-origin: top;
transition: all 0.2s linear;
transform: scale(1, 0);
animation-fill-mode: forwards;
From what I grasp, I am supposed to be able to do this in a much simpler format using the mixins built into bootstraps. The mixins are declared as follows;
// Transitions
.transition(#transition) {
-webkit-transition: #transition;
transition: #transition;
}
.transition-property(#transition-property) {
-webkit-transition-property: #transition-property;
transition-property: #transition-property;
}
.transition-delay(#transition-delay) {
-webkit-transition-delay: #transition-delay;
transition-delay: #transition-delay;
}
.transition-duration(#transition-duration) {
-webkit-transition-duration: #transition-duration;
transition-duration: #transition-duration;
}
.transition-transform(#transition) {
-webkit-transition: -webkit-transform #transition;
-moz-transition: -moz-transform #transition;
-o-transition: -o-transform #transition;
transition: transform #transition;
}
// Transformations
.rotate(#degrees) {
-webkit-transform: rotate(#degrees);
-ms-transform: rotate(#degrees); // IE9 only
transform: rotate(#degrees);
}
.scale(#ratio; #ratio-y...) {
-webkit-transform: scale(#ratio, #ratio-y);
-ms-transform: scale(#ratio, #ratio-y); // IE9 only
transform: scale(#ratio, #ratio-y);
}
.translate(#x; #y) {
-webkit-transform: translate(#x, #y);
-ms-transform: translate(#x, #y); // IE9 only
transform: translate(#x, #y);
}
.skew(#x; #y) {
-webkit-transform: skew(#x, #y);
-ms-transform: skewX(#x) skewY(#y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(#x, #y);
}
.translate3d(#x; #y; #z) {
-webkit-transform: translate3d(#x, #y, #z);
transform: translate3d(#x, #y, #z);
}
.rotateX(#degrees) {
-webkit-transform: rotateX(#degrees);
-ms-transform: rotateX(#degrees); // IE9 only
transform: rotateX(#degrees);
}
.rotateY(#degrees) {
-webkit-transform: rotateY(#degrees);
-ms-transform: rotateY(#degrees); // IE9 only
transform: rotateY(#degrees);
}
.perspective(#perspective) {
-webkit-perspective: #perspective;
-moz-perspective: #perspective;
perspective: #perspective;
}
.perspective-origin(#perspective) {
-webkit-perspective-origin: #perspective;
-moz-perspective-origin: #perspective;
perspective-origin: #perspective;
}
.transform-origin(#origin) {
-webkit-transform-origin: #origin;
-moz-transform-origin: #origin;
-ms-transform-origin: #origin; // IE9 only
transform-origin: #origin;
}
But I am not entirely clear on how this works. I cannot seem to figure out what "parameters" to pass through #transition and the like to make this code work. Can anyone help me out here? I am just kind of lost.
Whatever text you pass to an #variable when you use the mixin in a selector block will be copied to the places where the #variables appear in the mixins, and the contents of the mixins will be placed in your block. You can consider mixins somewhat like placeholder functions.
That means that if you declare a selector like:
div p:first-child {
.transition(width 2s ease-in-out, color 2s;);
color: red;
}
Using the .transition mixin you listed above, the Less processor will generate a CSS like:
div p:first-child {
-webkit-transition: width 2s ease-in-out, color 2s;
transition: width 2s ease-in-out, color 2s;
color: #FF0000;
}
The semicolon is important at the end of the argument otherwise Less may get confused and think you are sending two parameters, since comma-separated parameters are also valid. It won't be a problem in this case (since there is no .transition mixin that accepts two arguments), but it's good practice to always separate arguments with semicolons.
So to use the mixins, simply place them where you would add CSS declarations, end them with a semicolon, and pass the parameters as arguments.
Less does no duplication detection, so if you call the mixin twice, it just copies the replaced contents twice. If you already have a transition: property, for example, the mixin will add another one and its effect may be lost if yours comes after.
The best place to learn about Less, variables and mixins in at http://lesscss.org which has the full documentation in a few pages with plenty of examples. It's also great to have an editor which converts your Less files into CSS in real time so you understand how it works.
For the example you posted, you could create a mixin like the following:
.your-mixin(#origin, #transition, #transform, #anim-fill-mode) {
-webkit-transform-origin: #origin;
-webkit-transition: #transition;
-webkit-transform: #transform;
-webkit-animation-fill-mode: #anim-fill-mode;
-moz-transform-origin: #origin;
-moz-transition: #transition;
-moz-transform: #transform;
-moz-animation-fill-mode: #anim-fill-mode;
-ms-transform-origin: #origin;
-ms-transition: #transition;
-ms-transform: #transform;
-ms-animation-fill-mode: #anim-fill-mode;
-o-transform-origin: #origin;
-o-transition: #transition;
-o-transform: #transform;
-o-animation-fill-mode: #anim-fill-mode;
transform-origin: #origin;
transition: #transition;
transform: #transform;
animation-fill-mode: #anim-fill-mode;
}
To use it, you add it inside a selector block where you want the properties copied to:
.your-selector, .other-selector {
.your-mixin(top; all 0.2s linear; scale(1, 0); forwards;);
}