Is there a way for Adobe Edge to output with only CSS3 so javascript doesnt have to be used? If not, is there something else I can use that can do this?
You can do simple animations with CSS3 only. MDN is a useful resource.
This is the basic syntax:
h1 {
-webkit-animation-duration: 5s;
-webkit-animation-name: colorchange;
}
#-webkit-keyframes colorchange {
0% {
color: #fff
}
100% {
color: #000
}
There are other editors out there. Edge is really not the ideal editor for a lot of applications. For one thing, it is pretty heavily reliant on Javascript. Entirely I believe. Edge, for me, seems more geared to non-flash animation with a more powerful api to control animations from the page.
Other editors to look at:
Sencha animator
Hype
Purple for Mac
Purple, in particular seems like a good one for css3. It has a good, simple interface that can import psd files. But it is mac only.
Related
I am using background-clip on a heading h2 in my website, but somehow is not working on Edge. In Chrome and Firefox is amazing, but when I open in Edge the heading h2 is there but with transparent (i guess). I checked on caniuse.com and says that is supported on edge. So I don´t understand why is working every browser less this one.
I used the same #supports(-webkit-background-clip:text) just in case it won't support somehow, but because it is supported doesn't work and the heading is transparent.
This is my code:
.heading__secondary{
text-transform:uppercase;
font-size:$default-heading2-size;
letter-spacing:0.3rem;
font-weight:600;
line-height:1.5;
background-image:linear-gradient(to right, $color-secondary-dark, $color-primary-dark);
display:inline-block;
-webkit-background-clip:text;
background-clip:text;
color:transparent;
transition:all .2s ease-in-out;
&:hover {
transform: rotate(-2deg) scale(1.06);
}
I just want to know what I have to do to show on Edge like is showing in the other browsers.
I try to test the sample code from MDN site and it looks the sample for background-clip is working fine in MS Edge browser.
Reference:
background-clip
I also tried to test your code above. If you try to see the applied styles using developer tools than you can notice that background-image and &:hover is not applied.
Similar result I got in both chrome and Edge browser. This can be the root cause for the issue. You can notice in the image below that background-clip is applied successfully in Edge and chrome both browser.
It means that some other style code creating this issue. I suggest you to use the developer tools to find the applied styles for any specific element on your web page may help you to find the cause for this issue.
If issue persist than please try to provide the detailed code example including your relevant CSS and HTML code which can produce the issue with MS Edge browser. It will be better if you also try to include the snapshots of the output from chrome and Edge can help us to understand the issue in better way.
The Problem
I have a web page I'm working on that uses simple fade in and fade out transitions on the page elements when it loads.
They work fine except I seem to run into a problem on Chrome for iOS. Oddly enough, the problem doesn't reproduce on any other browsers, nor does it occur when testing with say BrowserStack. But seems to only occur when using an actual iPhone or iPad in only Chrome.
What occurs is the text fades in and then the opacity goes back to 0 making it disappear again.
Because it only occurs on the actual devices I'm having a tough time tracking down the source of the issue. Obviously I was able to identify the transitions as the source of the problem but so far I have yet to figure out why it's occurring and only on a single browser on the actual devices. I'm unsure of a way to use dev tools straight on a mobile device, usually I would just emulate it in a VM but as I mentioned the problem doesn't occur there. I also don't have a mac so any solution requiring a direct developer interface isn't possible.
Anyone have any ideas as to why I'm experiencing such behavior or any suggestions as to how I could approach this?
Code
Here's the code for how the transitions are handled, they are quite simple:
NOTE: browser prefixes excluded for brevity.
jQuery('.fade-up').one('inview', function() {
jQuery(this).removeClass('no-display');
jQuery(this).addClass('animated fadeInUp appear');
});
And the transitions themselves:
#keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.animated.fadeInUp {
animation-name: fadeInUp;
}
I'd like to emulate an elastic easing function in CSS3. CSS3 does not support this natively, so I've been coming up with my own keyframes, and it looks okay, but not perfectly natural.
I do NOT want a solution that requires any additional JavaScript scripts. All of the other posts on StackOverflow have JS solutions accepted.
What's the best way to implement elastic easing in pure CSS3?
Here's my work so far, if that helps anybody...
https://jsfiddle.net/407rhhnL/1/
I'm animating the red, green, and blue isometric rectangular prisms. I've simulated an elastic easing manually by hardcoding the following CSS3 keyframes:
#include keyframes(popup) {
0% {
}
20% {
transform: translateY(-50px);
}
40% {
transform: translateY(20px);
}
60% {
transform: translateY(-6px);
}
90% {
transform: translateY(0px);
}
100% {
transform: translateY(0px);
}
}
I'm not looking for suggestions on tweaking this code, I'd like to know if there's a better solution than hard coding.
Depending on your browser limitations (and if you're using CSS3 you should be ok regardless), you can actually apply easing transitions with the cubic-bezier() keyword instead.
An example animation would look like this:
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 2.9s;
Lea Verou's blog post covers this pretty well.
Lots of great cubic-bezier transitions available here:
http://easings.net/
Something like this might be what you want:
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
The only way to do an elastic easing in pure CSS is by hard-coding a keyframes animation, like you did.
The main problem with this approach is that the animation may look rough. To make it smoother, you just have to add more key frames. But then, the payload increases a little bit.
If you compare this approach with using a JavaScript library, a library lets make smoother and preciser animations, but the payload is way heavier because you have to use an entire library.
So, for some short transitions, it's fine to use hard-coded key frames animations.
It can be tricky to make the key frames, so I suggest using a tool for that. This is the only I know of:
https://easyeasings.com/
Edit: There's a CSS proposal to create this kind of easings: https://github.com/w3c/csswg-drafts/pull/6533
I can't figure out what's going on here.
I was updating a site that still had a marquee tag in use, so I replaced with a much smoother (though, still a marquee) css animation:
Problem is that it works fine in chrome and firefox, but is inconsistent in safari. Sometimes it loads, sometimes it doesn't. Also seems to not load more often when coming to the homepage via a link on the site vs a hard reload.
Is there anything loading that could interfere with the animation? Any ideas why it wouldn't work on some loads?
The page it's happening on is http://www.peacenow.com and the CSS I'm using is:
.marquee span {
position: absolute;
left: 0;
top: 0;
width: 7500px;
-webkit-animation: moveSlideshow 165s linear infinite;
}
#-webkit-keyframes moveSlideshow {
0% {
-webkit-transform: translate(0, 0);
}
100% {
-webkit-transform: translate(-100%, 0);
}
}
Try looking at Safari's methods for animation. Alternately I'd try using a more cross browser compatible method like jQuery.
jQuery is your best option if you take into consideration todays browser user-base, and compatibility between them. Look into jQuery .animate() for more information.
<script>
$('.marquee').marquee(); // The code to start a simple marquee in JavaScript's jQuery Marquee Plugin
</script>
and you'll need the jQuery and Marquee Plugins loaded by downloading them from jQuery and jQuery Marquee and then link them with <script src="/path/to/script.js"></script>
JSFiddle Example
P.S. This does work on my Androids 2.3 browser from 4 years ago where as the basic animation doesn't from your website. And let's face it, not many web surfers are actually sitting at a computer anymore.
I think there are two ways you can address this issue for Safari.
The first is using JavaScript to kickstart your animation.
Using Charles proxy, I manipulated the response so that this:
<p class="marquee" id="countries">
became this:
<p class="marquee-pre" id="countries">
Then, I injected the following JS at the bottom of the page:
<script>
$('.marquee-pre').attr('class', 'marquee');
</script>
which immediately addressed the issue.
If you don't mind adding JS to your page, I would recommend this approach.
If you can't add JS, or prefer not to, I found making the following change to the CSS animation also worked:
.marquee span {
-webkit-animation: moveSlideshow 165s linear infinite;
}
to:
.marquee span {
-webkit-animation: moveSlideshow 165s steps(10000) infinite;
}
While this works, I found it wasn't as "smooth" as using linear timing...
Is there a way to create a fade-in/fade-out effect on mouse over/out respectively that only uses CSS 3?
If there is, would you say that it is a good way to implement such an effect with CSS only or not?
To me, it seems like a presentation only issue so I'm not sure why JavaScript should be involved?
Are you looking for something like this: http://jsfiddle.net/hRuR9/2/ ?
It's pretty simple...
.box{
opacity: 0.0;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
}
.box:hover{
opacity: 1.0;
}
As for whether using it or not is a good idea, it depends on your target audience and which browsers you expect them to use or want to support. Recent versions of Safari, Chrome, and Firefox (and I believe Opera) support it. No idea about recent versions of IE, but you can pretty much forget about the older ones.